use-scroll-direction


> A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.

Key Features

- Performant 🔥

Do what is only needed. In a good way.

Use passive listener and throttling to make it invesible for your device.

- Versatile 💪🏼

Handle both X & Y axis, on browser window or custom element (ref).
Need more quick/lazy response? Play with wait option.

- Microlight 🪶

It's lighter than the air, only ~1.6kB.

- Cross-everything 🖥️

The same behavior on all kind of browsers and devices. No excuces (even on Iphone Safari).

- Great support 👨🏻

Stuck with implementation or has interesting use case and need something more? Create an issue and share your voice.

Installation

``bash
npm i use-scroll-direction
`

Usage

The hook returns the object with the actual scroll direction which could be one of three states: 'NONE', 'DOWN', 'UP', 'LEFT', 'RIGHT' and useful booleans.

$3

`tsx
import {useScrollDirection} from "use-scroll-direction";

export const WindowExample = () => {
const {
scrollDirection,
isScrolling,
isScrollingUp,
isScrollingDown,
isScrollingLeft,
isScrollingRight
} = useScrollDirection();

useEffect(() => {
console.log(scrollDirection)
}, [scrollDirection]);

return (

{...}

)
};

`


$3


`tsx
import {useScrollDirection} from "use-scroll-direction";

export const ComponentRefExample = () => {
const elementRef = useRef(null);
const {scrollDirection} = useScrollDirection({ref: elementRef});

useEffect(() => {
console.log(scrollDirection)
}, [scrollDirection]);

return (
//The content needs to overflow a container

{...}

)
};
`

Available options

| Name | Type | Description |
| - | - | - |
| wait | ?number | Time in ms for throttling of scroll handler (default: 50)
| timeToReset | ?number | Time in ms after last scroll event to reset the state (default: 150)
| ref | ?HTMLElement` | When passed, the listener will be attached to element instead of window object