lui666i / react-use-lazy-img

This hook empowers components to be able to load image lazily without any DOM/Component structure changes

react-use-lazy-img

This hook empowers components to be able to load image lazily without any DOM/Component structure changes.

Installation

npm i -S react-use-lazy-img

Usage

Trigger image loading when component is rendered (componentDidMount)

import React from "react";
import useLazyImg from "react-use-lazy-img";

function LazyImage({ imgUrl, placeholderUrl, fallbackUrl }) {
  const { imgSrc, onError } = useLazyImg(
    imgUrl,
    placeholderUrl,
    null,
    null,
    fallbackUrl
  );
  return <img src={imgSrc} onError={onError} />;
}

Load image when the element you specified is visible

import React, { useRef } from "react";
import useLazyImg from "react-use-lazy-img";

function LazyImage({ imgUrl, placeholderUrl, fallbackUrl }) {
  const imgElement = useRef(null);
  const { imgSrc, onError } = useLazyImg(
    imgUrl,
    placeholderUrl,
    imgElement,
    null,
    fallbackUrl
  );
  return <img src={imgSrc} ref={imgElement} onError={onError} />;
}

API

useLazyImg(imgUrl, placeholderUrl, [lazyTarget], [intersectionObserverOptions])

Name	Description
imgUrl	image url you want to load lazily
placeholderUrl	image url which will be used to display as placeholder before desired image loaded
lazyTarget	(optional) ref of a dom element which will be used to determine the timing of loading image according to its visibility
intersectionObserverOptions	(optional) use intersection observer options to defer image loading if you want to do this in a complicated way
fallbackUrl	(optional) image url which will be used when imgUrl is broken