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

1.0.8 • Public • Published

NPM Build Status David npm

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.

Package Sidebar

Install

npm i react-use-lazy-images

Weekly Downloads

1

Version

1.0.8

License

MIT

Unpacked Size

19.3 kB

Total Files

13

Last publish

Collaborators

  • mamal72