react-progress-loading

1.0.22 • Public • Published

react-progress-loading

Light weight react library to progressively load images using a medium like blur effect.

NPM JavaScript Style Guide

Install

npm install --save react-progress-loading
yarn add react-progress-loading

Example

alt text

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.221latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.221
1.0.210
1.0.200
1.0.190
1.0.180
1.0.170
1.0.160
1.0.150
1.0.140
1.0.130
1.0.120
1.0.110
1.0.100
1.0.90
1.0.80
1.0.71
1.0.60
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i react-progress-loading

Weekly Downloads

2

Version

1.0.22

License

MIT

Unpacked Size

16.9 kB

Total Files

7

Last publish

Collaborators

  • arnavpanwar99