A minimal React Hook for JavaScript scroll snapping. The Hook primarily snaps to elements using the wheel and touchmove events. Please reference the example folder on how to use the Hook.
| Property | Type | Default | Description | Required |
|---|---|---|---|---|
ref |
React.RefObject<HTMLElement> |
N/A | Parent element of the scroll items. | Yes |
duration |
number |
100 | Snap animation length in miliseconds. | No |
isArrowKeysEnabled |
boolean |
True | Enables the up and down arrow keys for snapping. | No |
isDirectionEnabled |
boolean |
True | Prioritizes scroll direction over element visibility in the viewport. | No |
| Property | Type | Description |
|---|---|---|
state |
React.RefObject<ScrollState> |
The internal state object used to track scroll information. |
goto |
(index: number) => void |
A function that will scroll to the element at the specified index. |
The package can be installed using npm. The package is written in TypeScript and exports the type declaration file in the distribution.
npm install react-use-scroll-snapThis project is licensed under the MIT License - see the LICENSE.md file for details.