❤
npm
Sign UpSign In

react-progressive-image-loading
TypeScript icon, indicating that this package has built-in type declarations

3.0.3 • Public • Published

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} />}
/>

Readme

Keywords

Package Sidebar

Install

npm i react-progressive-image-loading

Repository

github.com/wcandillon/react-progressive-image-loading

Homepage

github.com/wcandillon/react-progressive-image-loading#readme

Weekly Downloads

624

Version

3.0.3

License

Apache-2.0

Unpacked Size

18.1 kB

Total Files

8

Last publish

Collaborators

  • wcandillon
Try on RunKit
Report malware