Function useIntersectionObserver

Custom React hook that creates an Intersection Observer to monitor the visibility of a specified element in relation to the viewport or a specified root element.

When the observed element intersects with the specified threshold, the provided onEntry callback is triggered.

Example

const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);

  const handleIntersection = (entry: IntersectionObserverEntry) => {
    if (entry.isIntersecting) {
      console.log('Element is visible!');
    }
  };

  useIntersectionObserver({
    ref,
    onEntry: handleIntersection,
  });

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