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