react-fade-image

[Little demo with Storybook here](https://eatsjobs.github.io/react-fade-image/) 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

Usage no npm install needed!

<script type="module">
  import reactFadeImage from 'https://cdn.skypack.dev/react-fade-image';
</script>

README

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