@wojtekmaj/react-hooks/dist/useScrollLeftDirection.js

A collection of React Hooks.

import { useCallback, useRef, useState } from 'react';
import useEventListener from './useEventListener.js';
const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
/**
 * Returns current scroll left direction.
 *
 * @returns {Direction | null} Scroll left direction
 */
export default function useScrollLeftDirection() {
    const prevScrollLeft = useRef();
    const [direction, setDirection] = useState(isBrowser ? 'still' : null);
    const onScroll = useCallback(() => {
        const { scrollX } = window;
        if (prevScrollLeft.current !== undefined) {
            setDirection(prevScrollLeft.current < scrollX ? 'right' : 'left');
        }
        prevScrollLeft.current = scrollY;
    }, []);
    useEventListener(isBrowser ? document : null, 'scroll', onScroll);
    return direction;
}