React-lazy-img NPM

react-lazy-img

Very simple drop in replacement of <img> with lazy loading (images outside the viewport won't be loaded) and fade-in transition.

No frills, it just works.

Uses IntersectionObserver under the hood (can be polyfilled). If not available, image will be shown as is.

Demo

:zap: Live demo

:wrench: Demo in codesandbox

Install

yarn add react-lazy-img or npm i react-lazy-img

Simple example

import Img from `react-lazy-img`;

// ...

<Img src="/path/to/img.png" width={200} height={100} />

Image will start loading when its distance to the viewport is less than 500px (can be configured). Once loaded, it will fade in (by default 0.3s ease-in, can be configured).

width and height props are optional but recommended to avoid browser reflows.

You can pass any standard <img> attribute.

Full featured example

import Img from `react-lazy-img`;

// ...

<Img
  src="/path/to/img.png"
  width={200}
  height={100}
  offset={1000}
  fallback={() => <img src="/path/to/low-res-img.png" />}
  transition="opacity 1s ease-in"
/>

offset - number: distance to viewport to start loading
fallback - () => React.Node: result of this function will be rendered while not loaded
transition - string: CSS Transition property