react-fade-image

2.0.3 • Public • Published

react-fade-image

Little demo with Storybook here Simple react lazy fade image component. The image loads when it's in viewport by listening to scroll event (with throttled function every 200ms) The Obstruction of the image is precalculate thanks to the padding bottom trick

Usage

Install via package manager

npm install react-fade-image --save
OR
yarn add react-fade-image
import FadeImage from 'react-fade-image';
<FadeImage width={640} height={480} src='https://placeimg.com/640/480/animals' />
<FadeImage width={640} height={480} src='https://placeimg.com/640/480/animals' loaderComponent={<div>Loading...</div>}/>
<FadeImage ratio='16:9' src='https://placeimg.com/640/320/animals/sepia' />

Contribute :)

  • yarn
  • npm run build
  • npm run test:watch

Package Sidebar

Install

npm i react-fade-image

Weekly Downloads

4

Version

2.0.3

License

MIT

Unpacked Size

71 kB

Total Files

7

Last publish

Collaborators

  • eatsjobs