react-use-lazy-load-image v1.3.1

react-use-lazy-load-image :sunrise: :zap:

Add image lazy loading to your React app with ease

react-use-lazy-load-image uses the IntersectionObserver to provide a performant solution to lazy loading images that doesn't involve scroll event listeners. The IntersectionObserver API is still quite new so older browsers may not support this, however there are some good polyfills available for these use cases.

react-use-lazy-load-image is super light weight so won't add any extra bulk to your app.

As the name suggests react-use-lazy-load-image uses React Hooks, so you need to be using React function components to use this library.

Usage

1. Add a data-img-src attribute (you can customise this) to your img tags as your main image source
2. Change the src attribute to a placeholder like a small data URL blob
3. Import and run useLazyLoadImage in the body of your React function component

Now as your users scroll down the page the images will load just in time.

Arguments

Example

import React from 'react';
import useLazyLoadImage from 'react-use-lazy-load-image';

function App() {
  useLazyLoadImageReact();

  return (
    <div>Lots of content that means the image is off screen goes here</div>
    <img src="DATA URL" data-img-src="https://link-to-my-image.com/image.png" alt="My image" />
  )
}