react-progress-loading

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