Notorious Puppy Memes

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

    1.1.0 • 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.

    Install

    npm i @lvfang/react-use-lazy-images

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • crapthings
    • nexushubs
    • funkysamuel37