🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

github.com/robcalcroft/react-use-lazy-load-image

Package Overview
Dependencies
Alerts
File Explorer
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/robcalcroft/react-use-lazy-load-image

v1.3.1
Source
Go
Version published
Created
Source

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

  • Add a data-img-src attribute (you can customise this) to your img tags as your main image source
  • Change the src attribute to a placeholder like a small data URL blob
  • 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

Argument nameDefault valueDescription
imageAttribute'[data-img-src]'The query passed to document.querySelectorAll to grab all lazy load-able images on the page
imageAttributeKey'imgSrc'The camel-cased key to pull the data-img-src out of the image element
rootMargin'200px 0px'https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
threshold0.01 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
debugfalseWhen set to true some useful messages will get logged to the console
dependencies[]React useEffect dependency array, used for re-running this logic if the component re-renders and the img references change (read more about conditionally firing an effect)

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" />
  )
}

FAQs

Package last updated on 15 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts