Skip to content
Blurred progressive image loader for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
samples
src fix(ImageContainer): prevent setState to be called after unmount Jun 16, 2017
.babelrc init Mar 24, 2017
.gitignore init Mar 24, 2017
LICENSE
README.md
index.jsx code refractoring Mar 27, 2017
package.json 0.2.2 Mar 27, 2017
styles.css
webpack.build.js update webpack config Mar 27, 2017

README.md

react-blur-image-loader

Progressive Image Loading for React.

Setup

  1. Install
npm install react-blur-image-loader react react-dom -S
  1. Usage
import {render} from 'react-dom';
import BlurImageLoader from 'react-blur-image-loader';

render(<BlurImageLoader src={"picture.jpg"} 
                        preview={"tiny-picture.jpg"} 
                        fullCover={true}
                        maxBlurLevel={10}
                        transitionTime={400}/>, document.getElementById("root"));
  1. Props
PropName Type Default Value Description
src string Null This field is REQUIRED, it specifies the final image url
preview string "" Specifies a preview image url, a preview image should be a tiny optimized image, it will be present until final image loaded, if preview is not defined, a spin loader would be present until final image loaded.
fullCover bool false Specifies whether image should cover its parent area or contain inside.
maxBlurLevel number 10 Specifies the level of Gaussian blur, refer to stdDeviation.
transitionTime number 400 Specifies the transition time from blur to clear, default value is 400ms.
loader React.Element <DefaultLoader /> Specifies the preview loader
You can’t perform that action at this time.