🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Yet another React component that progressively loads images with a blur effect.

Image Loading React

Documentation

React Progressive Image Loading

Progressively load images using a blur effect.

CircleCI npm version

example

Installation

$ npm install react-progressive-image-loading --save

Import

import ProgressiveImage from "react-progressive-image-loading";

Usage

<ProgressiveImage     preview="/images/tiny-preview.png"     src="/images/preview.png"     render={(src, style) => <img src={src} style={style} />} />

Instead of using the img tag, you can use background-image with a div.

<ProgressiveImage     preview="/images/tiny-preview.png"     src="/images/preview.png"     render={(src, style) => <div style={Object.assign(style, { backgroundImage: `url(${src})` })} />} />

You can also customize the transition time and the timing function used for that transition.

<ProgressiveImage     preview="/images/tiny-preview.png"     src="/images/preview.png"     transitionTime={500}     transitionFunction="ease"     render={(src, style) => <img src={src} style={style} />} />

You May Also Like