@foo-software/react-lazy-offscreen-image
v0.0.17
Published
A lazy loading React component to display a background image when in the viewport and the image is loaded.
Downloads
9
Maintainers
Readme
@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
[email protected]
react-scroll-context
: Used to provide scroll data.
Props
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.