useIntersectionObserver

A lightweight and flexible React hook to observe element visibility using the Intersection Observer API.

Installation

npm install use-intersection-observer

or

yarn add use-intersection-observer

Usage

import { useIntersectionObserver } from "use-intersection-observer";

export default function ExampleComponent() {
    const { elementRef, isIntersecting } = useIntersectionObserver();

    return (
        <div>
            <div style={{ height: "100vh" }}>Scroll down</div>
            <div
                ref={elementRef}
                style={{
                    height: 100,
                    background: isIntersecting ? "green" : "red",
                }}
            >
                {isIntersecting ? "Visible" : "Not Visible"}
            </div>
        </div>
    );
}

API

useIntersectionObserver(callback?, options?)

Parameter	Type	Default	Description
callback	(entry: IntersectionObserverEntry) => void	undefined	Callback function triggered when visibility changes.
options	IntersectionOptions	{ threshold: 0.1, root: null, rootMargin: '0px', freezeOnceVisible: false }	Options for customizing the observer behavior.

options properties

Option	Type	Default	Description
threshold	number or number[]	0.1	Intersection threshold for triggering observer.
root	Element or null	null	Root element for intersection calculation.
rootMargin	string	'0px'	Margin around the root element.
freezeOnceVisible	boolean	false	If true, stops observing once the element is visible.

Example with Callback

const callback = (entry) => {
    console.log("Element is visible:", entry.isIntersecting);
};

const { elementRef, isIntersecting } = useIntersectionObserver(callback, {
    threshold: 0.5,
});

License

This project is licensed under the MIT License.