simple Intersection Observer hook

useIntersectionObserver.ts

import { MutableRefObject, useEffect, useRef } from 'react';

interface Options<Target> {
  root?: MutableRefObject<any>;
  enabled?: boolean;
  rootMargin?: string;
  threshold: number;
  onIntersect: (entry?: IntersectionObserverEntry, target?: Target) => void;
}

const useIntersectionObserver = <Target extends Element>({
  root,
  enabled = true,
  rootMargin,
  threshold = 1,
  onIntersect
}: Options<Target>) => {
  const targetRef = useRef<Target>(null);

  useEffect(() => {
    if (!enabled) return;

    const observer = new IntersectionObserver(
      (entries) => {
        return entries.forEach((entry) => {
          if (targetRef.current) onIntersect(entry, targetRef.current);
        });
      },
      {
        root: root && root.current,
        rootMargin,
        threshold
      }
    );

    if (!targetRef || !targetRef.current) return;
    const el = targetRef.current;
    observer.observe(el);

    return () => {
      if (el) observer.unobserve(el);
    };
  }, [enabled, root, rootMargin, threshold, onIntersect]);

  return targetRef;
};

export default useIntersectionObserver;