nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    @foo-software/react-lazy-offscreen-image

    0.0.17 • Public • Published

    @foo-software/react-lazy-offscreen-image

    React Lazy Offscreen Image exports a lazy loading React component to display a background image when in the viewport and the image is loaded. When analyzing website performance with tools like Lighthouse for example, often we find an opportunity for improvement in loading images below the fold, on demand - asynchronously. Lighthouse documentation explains the offscreen image performance metric in detail. This component provides lazy loading of images as an element with a backround image, when the user has scrolled it into the browser viewport. This technique is known as "lazy loading".

    Install

    npm

    npm install @foo-software/react-scroll-context @foo-software/react-lazy-offscreen-image
    

    yarn

    yarn add @foo-software/react-scroll-context @foo-software/react-lazy-offscreen-image
    

    Dependencies

    Props

    Name Description PropType Required Default
    children Anything that can be rendered, but typically a tree of elements. The background image will be added to the container. children can optionally be specifid to render inside the container with the background image. node false null
    className An optional custom className to be added to the container. string false null
    CustomTag A custom HTML tag used for the container element. string false div
    imageUrl The image URL for the background image. string true --
    ScrollContext A scroll Context object created by React.createContext(). You will need to use the same context as with react-scroll-context. This component depends on `react-scroll-context` to provide scroll data. object true --

    Usage

    Example combined with react-scroll-context.

    import React from 'react';
    import { ScrollProvider } from '@foo-software/react-scroll-context';
    import { LazyOffscreenImage } from '@foo-software/react-lazy-offscreen-image';
    
    // replace `scroll-context` any name you like.
    const ScrollContext = React.createContext('scroll-context');
    
    const App = () => (
      <ScrollProvider
        Context={ScrollContext}
      >
        <div>
          <h1>Scroll it!</h1>
          <p>Ipsum lorem, a lot of content here...</p>
          <LazyOffscreenImage
            imageUrl="http://placekitten.com/300/300"
            ScrollContext={ScrollContext}
          />
        </div>
      </ScrollProvider>
    );

    Demo

    An example using this component can be seen on Foo's features page.

    Credits

    This package was brought to you by Foo - a website performance monitoring tool. Create a free account with standard performance testing. Automatic website performance testing, uptime checks, charts showing performance metrics by day, month, and year. Foo also provides real time notifications when performance and uptime notifications when changes are detected. Users can integrate email, Slack and PagerDuty notifications.

    Install

    npm i @foo-software/react-lazy-offscreen-image

    DownloadsWeekly Downloads

    19

    Version

    0.0.17

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • adamhenson