React hook useScrollDirection

useScrollDirection.ts

import { useCallback, useEffect, useRef, useState } from "react";

export enum ScrollDirection {
  "up" = "up",
  "down" = "down",
}

export function useScrollDirection() {
  const scrollYRef = useRef(0);
  const [direction, setDirection] = useState(ScrollDirection.up);

  const scrollDirection = useCallback(() => {
    setDirection(
      window.scrollY > scrollYRef.current
        ? ScrollDirection.down
        : ScrollDirection.up,
    );

    scrollYRef.current = window.scrollY;
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", scrollDirection);

    return () => {
      window.removeEventListener("scroll", scrollDirection);
    };
  }, [scrollDirection]);

  return direction;
}