Custom React Hook for setting a passive scroll listener and get updated scrollY and scroll direction information

use-scroll-listener.js

/**
 * useScrollListener hook
 * Usage: const { scrollY, scrollDirection } = useScrollListener();
 */

import { useState, useRef, useEffect } from 'react';

export function useScroll() {
  const [scrollY, setScrollY] = useState(0);
  const [progress, setProgress] = useState(0);
  const previousScrollY = useRef();
  const [scrollDirection, setScrollDirection] = useState("down");

  useEffect(() => {
    previousScrollY.current = scrollY;
  });

  useEffect(() => {
    function listener() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      setScrollY(scrollTop);
      setProgress(
        scrollTop / (document.documentElement.offsetHeight - window.innerHeight)
      );

      const direction = previousScrollY.current < scrollTop ? "down" : "up";
      setScrollDirection(direction);
    }

    window.addEventListener("scroll", listener, { passive: true });
    return () => {
      window.removeEventListener("scroll", listener, { passive: true });
    };
  }, []);

  return {
    scrollY,
    progress,
    scrollDirection
  };
}