Custom React hook that observes a target element and executes a callback when it becomes visible.

useIntersectionObserver.ts

import { useEffect, useRef } from "react";

export default function useIntersectionObserver(
  el: HTMLElement | null,
  callback: (entry: IntersectionObserverEntry) => void,
  options: IntersectionObserverInit & {
    enabled: boolean;
  } = {
    root: null,
    threshold: 0.4,
    rootMargin: "0px",
    enabled: true,
  }
) {
  const observer = useRef<IntersectionObserver | null>(null);

  useEffect(() => {
    if (!el || !options.enabled) {
      return;
    }

    observer.current = new IntersectionObserver(([entry]) => {
      if (entry) {
        callback(entry);
      }
    }, options);

    observer.current.observe(el);

    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, [el, callback, options.enabled]);
}