An array whose first value is a ref you need to attach to the element to observe. The second value is an IntersectionObserverEntry as described by the IntersectionObserver API. This value is initially null but updates every time there is a change in the intersection.
const DemoUseIntersectionObserver = () => {
const [ref, entry] = useIntersectionObserver<HTMLDivElement>();
return (
<>
<h1 style={{color: entry?.isIntersecting ? "green" : "red", position: "fixed", left: 0, top: 0}}>
The div is {entry?.isIntersecting ? "" : "not"} in view.
</h1>
<div ref={ref} style={{marginTop: "200vh", backgroundColor: "red"}}>
Hello, world!
</div>
</>
);
};
Provides a hook API that wraps the IntersectionObserver API. This hook is for use with a single element only. For simplicity this is the recommended approach. If you have an extremely large number of objects to observe and want to avoid creating an IntersectionObserver for each, refer to useIntersectionObserverArray to use a single observer for multiple elements with a common root.