React hook to check if some element is currently on the view port

useOnScreen.ts

import { RefObject, useEffect, useState } from 'react';
import throttle from 'utils/throttle';

export default function useOnScreen(
  elementRef: RefObject<HTMLElement>
): boolean {
  const [isVisible, setIsVisible] = useState(false);

  const onScroll = throttle(() => {
    if (!elementRef.current) {
      setIsVisible(false);
      return;
    }
    const { top } = elementRef.current.getBoundingClientRect();
    setIsVisible(top >= 0 && top <= window.innerHeight);
  }, 200);

  useEffect(() => {
    document.addEventListener('scroll', onScroll, true);
    return () => document.removeEventListener('scroll', onScroll, true);
  });

  return isVisible;
}