Skip to content
Progressively load images using a blur effect.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix(component): Minor improvements Apr 24, 2018
.gitignore 🔧 May 1, 2017
LICENSE Initial commit May 1, 2017
README.md fix(api): Fix default class export in API Jul 25, 2017
circle.yml Merge branch 'master' into improvements Apr 24, 2018
package.json ⬆️ Apr 24, 2018
tsconfig.json 🔧 May 1, 2017
tslint.json 🔧 May 1, 2017
yarn.lock fix(component): Minor improvements Apr 24, 2018

README.md

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 can’t perform that action at this time.