react-progress-loading
v1.0.22
Published
Progressively load images using a medium like blur effect.
Downloads
11
Maintainers
Readme
react-progress-loading
Light weight react library to progressively load images using a medium like blur effect.
Install
npm install --save react-progress-loading
yarn 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'
class Example extends Component {
render() {
return (<ProgressiveImage
originalImageSrc={originalImage} //requied
smallImageSrc={smallImage} //required
containerDivStyles={{}}
smallImageStyles={{}}
originalImageStyles={{}}
originalImageAlt=''
smallImageAlt=''
/>)
}
}
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