react-lazy-img
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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

⚡️ Live demo

🔧 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

Special thanks

@fdaciuk for kindly transferring npm package name ownership

License

MIT

Package Sidebar

Install

npm i react-lazy-img

Weekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

43.9 kB

Total Files

10

Last publish

Collaborators

  • pladaria