Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Blurred progressive image loader for React

Topics

Resources

License

Releases

No releases published

Packages

No packages published