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" />
Instead of using the img
tag, you can use background=true
that will generate a div
with background-image
as inlined css.
<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png" background={true} />
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"
/>