react-use-lazy-images

Minimal zero dependency lazy load images solution with a simple React Hook for all images of an element.

Note that this package is using Intersection Observer API and won't do anything if this API isn't available on the user's browser.

Installation

Using NPM:

npm i react-use-lazy-images

Using Yarn:

yarn add react-use-lazy-images

Usage

import React from 'react'
import { useLazyImages } from 'react-use-lazy-images'

const STYLES = {
  height: "5000px",
  margin: '0 auto',
  width: '100%'
}

export function OctoCats() {
  const ref = useLazyImages<HTMLDivElement>({
    placeholderSrc:
      "https://octodex.github.com/images/vinyltocat.png"
  });
  return (
    <div ref={ref} style={STYLES}>
      <h1>React Use Lazy Images</h1>
      <img
        alt="Vinyltocat"
        src="https://octodex.github.com/images/surftocat.png"
      />
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <img
        alt="Surftocat"
        src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
      />
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <img
        alt="Justicetocat"
        src="https://octodex.github.com/images/justicetocat.jpg"
      />
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <img
        alt="Private Investocat"
        src="https://octodex.github.com/images/privateinvestocat.jpg"
      />
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <img
        alt="Robotocat"
        src="https://octodex.github.com/images/Robotocat.png"
      />
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <h2>Some Elements Between</h2>
      <img
        alt="Spidertocat"
        src="https://octodex.github.com/images/spidertocat.png"
      />
    </div>
  );
}

Contribution

You can report bugs and issues here.

You can also send a PR if you feel like you can improve or fix something. Don't forget to write/update tests for your changes.