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