react-blur-image-loader
Progressive Image Loading for React.
Setup
- Install
npm install react-blur-image-loader react react-dom -S - 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"));- 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 |
