react-pre-hooksuseScrollDirection
This hook detects the scroll direction of the window or a target element.
Parameters
- the
refobject of the target element (default iswindow).
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| isUp | Boolean | indicates if the user is scrolling up. |
| isDown | Boolean | indicates if the user is scrolling down. |
| isLeft | Boolean | indicates if the user is scrolling left. |
| isRight | Boolean | indicates if the user is scrolling right. |
Example Usage
tsx
import { useScrollDirection } from 'react-pre-hooks';
export default function Example() {
const { isDown, isUp } = useScrollDirection();
return (
<main>
<nav className={isUp || !isDown ? "show" : ""}>Navigation</nav>
</main>
);
}import { useScrollDirection } from 'react-pre-hooks';
export default function Example() {
const { isDown, isUp } = useScrollDirection();
return (
<main>
<nav className={isUp || !isDown ? "show" : ""}>Navigation</nav>
</main>
);
}