src/hooks/useIntersectionObserver.js

import {useEffect, useRef} from "react";

/**
 * @param callback
 */
function useIntersectionObserver(callback) {
  if (
    !("IntersectionObserver" in window) ||
    !("IntersectionObserverEntry" in window) ||
    !("intersectionRatio" in window.IntersectionObserverEntry.prototype)
  ) {
    return;
  }

  const elementRef = useRef();

  const observer = new IntersectionObserver(callback);

  useEffect(() => {
    if (!elementRef.current) return;

    observer.observe(elementRef.current);
  }, [elementRef.current]);

  return elementRef;
}

export default useIntersectionObserver;