useIntersectionObserverEntry

useIntersectionObserverEntry.ts

// const ref = useIntersectionObserverEntry(entry => console.log(entry))
// return <div ref={ref}>...</div>

function useIntersectionObserverEntry(
  callback: (value?: IntersectionObserverEntry) => void
): React.RefCallback<Element> {
  const observerRef = React.useRef<IntersectionObserver>();
  const callbackRef = React.useRef<typeof callback>(callback);
  callbackRef.current = callback;

  return React.useCallback(el => {
    if (el) {
      const observer = new IntersectionObserver(entries => {
        callbackRef.current(entries[0]);
      });
      observer.observe(el);
      observerRef.current = observer;
    } else {
      callbackRef.current(undefined);
      observerRef.current?.disconnect();
    }
  }, []);
}