reactuals/dist/hooks/useScrollDirection.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useEffect, useState } from "react";
export function useScrollDirection() {
    const [direction, setDirection] = useState("down");
    useEffect(() => {
        let lastScrollY = window.scrollY;
        const updateScrollDir = () => {
            const currentScrollY = window.scrollY;
            setDirection(currentScrollY > lastScrollY ? "down" : "up");
            lastScrollY = currentScrollY;
        };
        window.addEventListener("scroll", updateScrollDir);
        return () => window.removeEventListener("scroll", updateScrollDir);
    }, []);
    return direction;
}
/*
Example:
const direction = useScrollDirection();
console.log(direction); // "up" or "down"
*/