Windowのスクロール状態を監視するためのReact hooks

use-scrolling.ts

export const useScrolling = (delay: number) => {
  const [scrolling, setScrolling] = useState(false);
  useEffect(() => {
    let debounceTimer = null;
    const eventHandler = () => {
      if (scrolling === false) {
        setScrolling(true);
      }
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(() => {
        setScrolling(false);
      }, delay);
    }
    window.addEventListener('scroll', eventHandler);
    return (() => {
      window.removeEventListener('scroll', eventHandler);
    })
  }, []);
  return scrolling;
}

スクロールが開始されたらtrue, スクロールが終わったタイミングでfalseを返すhook