https://github.com/foo-software/react-lazy-offscreen-image
A lazy loading React component to display a background image when in the viewport and the image is loaded.
https://github.com/foo-software/react-lazy-offscreen-image
Last synced: about 1 month ago
JSON representation
A lazy loading React component to display a background image when in the viewport and the image is loaded.
- Host: GitHub
- URL: https://github.com/foo-software/react-lazy-offscreen-image
- Owner: foo-software
- Created: 2019-04-14T20:51:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-26T13:33:42.000Z (almost 7 years ago)
- Last Synced: 2025-09-17T15:11:10.712Z (9 months ago)
- Language: JavaScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](https://developers.google.com/web/tools/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](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images) 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
- `react@16.8`
- [`react-scroll-context`](https://www.npmjs.com/package/@foo-software/react-scroll-context): Used to provide scroll data.
## 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`](https://www.npmjs.com/package/@foo-software/react-scroll-context).
```jsx
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 = () => (
Scroll it!
Ipsum lorem, a lot of content here...
);
```
## Demo
An example using this component can be seen on [Foo's features page](https://www.foo.software/features).
## Credits
> 
This package was brought to you by [Foo - a website performance monitoring tool](https://www.foo.software). 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.