React In Viewport

---

Library to detect whether or not a component is in the viewport, using the Intersection Observer API.

This library also uses MutationObserver to detect the change of the target element.

``npm install --save react-in-viewport`

`yarn add react-in-viewport`

Examples

Demo

Why

A common use case is to load an image when a component is in the viewport (lazy load).

We have traditionally needed to monitor scroll position and calculate the viewport size, which can be a scroll performance bottleneck.

Modern browsers now provide a new API--Intersection Observer API--which can make implementating this effort much easier and performant.




Polyfill

For browsers not supporting the API, you will need to load a polyfill.
Browser support table

`js
require('intersection-observer');
`

Design

The core logic is written using React Hooks. We provide two interfaces: you can use handleViewport, a higher order component (HOC) for class based components, or use hooks directly, for functional components.

The HOC acts as a wrapper and attaches the intersection observer to your target component. The HOC will then pass down extra props, indicating viewport information and executing a callback function when the component enters and leaves the viewport.

Usages

$3


When wrapping your component with handleViewport HOC, you will receive inViewport props indicating whether the component is in the viewport or not.

handleViewport HOC accepts three params: handleViewport(Component, Options, Config)

| Params | Type | Description |
|-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------|
| Component | React Element | Callback function for when the component enters the viewport |
| Options | Object | Options you want to pass to Intersection Observer API | |
| Config | Object | Configs for HOC (see below) |

$3

| Params | Type | Default | Description |
|-------------------|---------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------|
| disconnectOnLeave | boolean | false | Disconnect intersection observer after leave |

$3

| Props | Type | Default | Description |
|-----------------|----------|---------|-------------------------------------------------|
| onEnterViewport | function | | Callback function for when the component enters the viewport |
| onLeaveViewport | function | | Callback function for when the component leaves the viewport |

The HOC preserves onEnterViewport and onLeaveViewport props as a callback




$3

| Props | Type | Default | Description |
|------------|-----------|---------|-----------------------------------------------------------------------------------|
| inViewport | boolean | false | Whether your component is in the viewport |
| forwardedRef | React ref | | Assign this prop as a ref on your component |
| enterCount | number | | Numbers of times your component has entered the viewport |
| leaveCount | number | | Number of times your component has left the viewport |

_NOTE_: Need to add ref={this.props.forwardedRef} to your component

#### Example of a functional component

`tsx
import handleViewport, { type InjectedViewportProps } from 'react-in-viewport';

const Block = (props: InjectedViewportProps) => {
const { inViewport, forwardedRef } = props;
const color = inViewport ? '#217ac0' : '#ff9800';
const text = inViewport ? 'In viewport' : 'Not in viewport';
return (