react-intersection-observer-hook

This is a easy to use React hook package for using Insersection Observer declaratively. By using this hook, you can easily track if a component is visible or not, create lazy loading images, trigger animations on entering or leaving the viewport, implement infinite scroll etc.

Live demo is here.

This package relies on Intersection Observer API. Browser compatibility can be seen in here.

If you want to support the browsers those are not supporting it natively, you can use a polyfill.

Versions

For React v19, it is recommended to use versions after v4, since it uses cleanup functions for refs.

For older versions of React, you can stick with v3 until you migrate to React 19.

Installation

1npm install react-intersection-observer-hook

Usage

1import React, { useEffect } from 'react';
2import { useIntersectionObserver } from 'react-intersection-observer-hook';
3// ...
4
5function Example() {
6  // `useIntersectionObserver` returns a tuple.
7  // We need to give this `ref` callback to the node we want to observe.
8  // The second item, `entry` is the response of the `IntersectionObserver` instance.
9  const [ref, { entry }] = useIntersectionObserver();
10  const isVisible = entry && entry.isIntersecting;
11
12  return (
13    <div>
14      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
15      <SomeComponentToTrack ref={ref} />
16    </div>
17  );
18}

If you have a scrollable container, you can set a root like this:

1import React, { useEffect } from 'react';
2import { useIntersectionObserver } from 'react-intersection-observer-hook';
3// ...
4
5function Example() {
6  const [ref, { entry, rootRef }] = useIntersectionObserver();
7  const isVisible = entry && entry.isIntersecting;
8
9  return (
10    <div>
11      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
12      <ScrollableContainer
13        // We use `rootRef` callback to set the root node.
14        ref={rootRef}
15      >
16        <SomeComponentToTrack ref={ref} />
17      </ScrollableContainer>
18    </div>
19  );
20}

If you just want to track visibility, you can also use useTrackVisibility hook. It mostly has the same API as useIntersectionObserver hook.

1import React, { useEffect } from 'react';
2import { useTrackVisibility } from 'react-intersection-observer-hook';
3// ...
4
5function Example() {
6  // `useTrackVisibility` also returns a tuple like `useIntersectionObserver`.
7  // First item is the same `ref` callback to set the node to observe.
8  // Second item is an object that we can use to decide if a node is visible.
9  // `entry`: Same object which is returned by `useIntersectionObserver`.
10  // `rootRef`: Same ref callback which is returned by `useIntersectionObserver`.
11  // `isVisible`: Becomes `true`/`false` based on the response of `IntersectionObserver`.
12  const [ref, { entry, rootRef, isVisible }] = useTrackVisibility({
13    // In addition to the `IntersectionObserver` arguments, you can use `once` flag
14    // to watch the visibility of an element once, so `isVisible` stays `true` after the element is visible for the first time.
15    // once: true,
16  });
17
18  return (
19    <div>
20      <p>Component is {isVisible ? 'visible' : 'not visible'}.</p>
21      <SomeComponentToTrack ref={ref} />
22    </div>
23  );
24}

You can find more usage examples in the demo app in this repository.

Arguments

useIntersectionObserver

• rootMargin: Indicates the margin value around the root element. Default value is 0 for all directions (top, right, bottom and left).
• threshold: Threshold value (or values) to trigger the observer.

For more info, you can check here and here.

useTrackVisibility

Gets the same arguments as useIntersectionObserver. In addition:

• once: When set true, isVibisle stays as true after the element is visible for the first time. Default false.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

KimSeonghyeon 💻

Add your contributions

This project follows the all-contributors specification. Contributions of any kind welcome!