react-intersection-observer

What is react-intersection-observer?

The react-intersection-observer package is a React implementation of the Intersection Observer API, making it easier to perform actions based on how an element intersects with the viewport. It's useful for lazy loading, infinite scroll, or triggering animations when the user scrolls.

What are react-intersection-observer's main functionalities?

Observing visibility of an element

This feature allows you to track the visibility of a component or element. The `useInView` hook returns a `ref` that you attach to the element you want to observe. It also returns a state `inView` that tells you whether the element is in the viewport or not.

import { useInView } from 'react-intersection-observer';

function Component() {
  const { ref, inView } = useInView();

  return (
    <div ref={ref}>
      {inView ? 'In view!' : 'Not in view!'}
    </div>
  );
}

Triggering animations when entering the viewport

This code sample demonstrates how to use the `useInView` hook to trigger animations or add classes to an element once it enters the viewport. The `threshold` option specifies how much of the element should be visible before `inView` becomes true.

import { useInView } from 'react-intersection-observer';
import { useEffect } from 'react';

function AnimatedComponent() {
  const { ref, inView } = useInView({ threshold: 0.1 });

  useEffect(() => {
    if (inView) {
      // Trigger animation or add class
    }
  }, [inView]);

  return <div ref={ref}>Animate me!</div>;
}

Other packages similar to react-intersection-observer

react-lazy-load-image-component

This package is designed specifically for lazy loading images in React applications. It provides components like `LazyLoadImage` for easy integration. While it's focused on images, react-intersection-observer offers a more general approach for observing any element's visibility.

react-waypoint

React Waypoint is another package for handling the visibility of elements during scroll. It triggers a function when you scroll to an element. Compared to react-intersection-observer, it's less flexible with the observer options but still a solid choice for simple use cases.

README

react-intersection-observer

React component that allows triggers a function when the component enters or leaves the viewport.

import Observer from 'react-intersection-observer'

<Observer>
  {inView => <h2>{`Header inside viewport ${inView}.`}</h2>}
</Observer>

Demo

See https://thebuilder.github.io/react-intersection-observer/ for a demo.

Scroll monitor

This module is used in react-scroll-percentage to monitor the scroll position of elements in view.

Installation

Install using Yarn:

yarn add react-intersection-observer

or NPM:

npm install react-intersection-observer --save

Props

The <Observer /> accepts the following props:

Name	Type	Default	Required	Description
tag	String		false	Element tag to use for the wrapping component
children	func/node		false	Children should be either a function or a node
triggerOnce	Bool	false	true	Only trigger this method once
threshold	Number	0	false	Number between 0 and 1 indicating the the percentage that should be visible before triggering
onChange	Func		false	Call this function whenever the in view state changes
render	Func		false	Use render method to only render content when inView

Example code

Child as function

The basic usage pass a function as the child. It will be called whenever the state changes, with the new value of inView.

import Observer from 'react-intersection-observer'

<Observer>
  {inView => <h2>{`Header inside viewport ${inView}.`}</h2>}
</Observer>

Render callback

For simple usecases where you wan't to only render a component when it enters view, you can use the render prop.

import Observer from 'react-intersection-observer'

<Observer
  style={{ height: 200, position: 'relative' }}
  render={() => (
    <div
      style={{
        position: 'absolute',
        top: 0,
        bottom: 0,
      }}
    >
      <p>
        {'Make sure that the Observer controls the height, so it does not change change when element is added.'}
      </p>
    </div>
  )}
/>

OnChange callback

You can monitor the onChange method, and control the state in your own component. The child node will always be rendered.

import Observer from 'react-intersection-observer'

<Observer onChange={(inView) => console.log('Inview:', inView)}>
  <h2>
    Plain children are always rendered. Use onChange to monitor state.
  </h2>
</Observer>

Universal rendering

The IntersectionObserver polyfill requires window and document, and will crash if you try to import it outside the browser. To allow the Observer to be rendered universally, it only loads the IntersectionObserver polyfill if window exists.