react-progressive-image-loading

React Progressive Image Loading

Progressively load images using a blur effect.

Installation

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

Usage

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

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

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

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">
{(src, style) => <img src={src} style={style} />}
</ProgressiveImage>

In case of background=true, it is possible to add some layers on top of the background image, for instance:

<ProgressiveImage
  preview="/images/tiny-preview.png" src="/images/preview.png" background={true}
  backgroundImages={["linear-gradient(to top, rgba(31,31,31,0.3), rgba(31,31,31,0.3))"]}
/>