react-progress-loading
Light weight react library to progressively load images using a medium like blur effect.
Install
npm install --save react-progress-loadingyarn add react-progress-loading
Example
Demo
For a working demo, checkout my sandbox
Usage
import React Component from 'react' import ProgressiveImage from 'react-progress-loading' { return <ProgressiveImage = // = // = = = ='' ='' /> }
Props
originalImageSrc
Required: Yes
Description: The url to original image
Type: string (url)
smallImageSrc
Required: Yes
Description: The url to smaller(roughly 10% of original one) image
Type: string (url)
originalImageAlt
Required: No
Description: The alt text of original image
Type: string
smallImageAlt
Required: No
Description: The alt text of small image
Type: string
originalImageStyles
Required: No
Description: The styles to be applied to original image
Type: object
smallImageStyles
Required: No
Description: The styles to be applied to small image
Type: object
containerDivStyles
Required: No
Description: The styles to be applied to div containing both the images
Type: string (url)
License
MIT © arnavozil