React Intersection observer hook

use-on-screen.ts

import { useCallback, useState } from 'react';
import * as React from 'react';

type Result = {
  measureRef: (node: unknown) => void;
  isIntersecting: boolean;
  observer?: IntersectionObserver;
};

function useOnScreen({ root = null, rootMargin = '0px', threshold = 0 } = {}): Result {
  const [observer, setOserver] = useState<IntersectionObserver>();
  const [isIntersecting, setIntersecting] = useState(false);

  React.useEffect(() => {
    return () => {
      if (observer) {
        observer.disconnect();
      }
    };
  }, [observer]);

  const measureRef = useCallback(
    node => {
      if (node) {
        const observer = new IntersectionObserver(
          ([entry]) => {
            setIntersecting(entry.isIntersecting);
          },
          { root, rootMargin, threshold }
        );

        observer.observe(node);

        setOserver(observer);
      }
    },
    [root, rootMargin, threshold]
  );

  return { measureRef, isIntersecting, observer };
}

export default useOnScreen;