react-intersection-observer-hook

This is a simple 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 loading 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.

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  useEffect(() => {
13    console.log(`The component is ${isVisible ? 'visible' : 'not visible'}.`);
14  }, [isVisible]);
15
16  return <SomeComponentToTrack ref={ref} />;
17}

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  useEffect(() => {
10    console.log(`The component is ${isVisible ? 'visible' : 'not visible'}.`);
11  }, [isVisible]);
12
13  return (
14    <ScrollableContainer
15      // We use `rootRef` callback to set the root node.
16      ref={rootRef}
17    >
18      <SomeComponentToTrack ref={ref} />
19    </ScrollableContainer>
20  );
21}

If you just want to track visibility, you can also use useTrackVisibility hook. It has the same API as useIntersectionObserver hook. It just returns additional fields as its second tuple item.

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  // `wasEverVisible`: When the observed node becomes visible once, this flag becomes `true` and stays like that.
13  const [ref, { entry, rootRef, isVisible, wasEverVisible }] =
14    useTrackVisibility();
15
16  useEffect(() => {
17    console.log(`The component is ${isVisible ? 'visible' : 'not visible'}.`);
18  }, [isVisible]);
19
20  return <SomeComponentToTrack ref={ref} />;
21}

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

Arguments

Both useIntersectionObserver and useTrackVisibility gets the same arguments. And those are;

• rootMargin: Indicates the margin value around the root element. Default value is zero 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.

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!