React Blur Image Loader Save
Blurred progressive image loader for React
Project README
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 |
Open Source Agenda is not affiliated with "React Blur Image Loader" Project. README Source: MarkoCen/react-blur-image-loader
Stars
59
Open Issues
3
Last Commit
6 years ago
Repository
License
Tags
Open Source Agenda Badge
