@dims/scrollnav

$3

The useScrollNav hook allows you to add a scrollable wrapper around nav items while giving you full control over the UI.

#### NPM Package

``
npm i @dims/scrollnav
`

#### Usage

`javascript
import { useScrollNav } from '@dims/scrollnav';

const ExampleNavComponent = () => {
const listRef = React.useRef();

const { canScrollPrev, canScrollNext, scrollPrev, scrollNext } = useScrollNav(
{ listRef }
);

return (



);
};
`

#### Example

See ./src/Example.jsx.

Hook params:

`md
| Prop | Type | Required | Description |
| -------------- | ------ | -------- | ------------------------------------------------- |
| listRef | Object | yes | Ref of the direct parent of your nav items |
| scrollStepSize | Number | no | % of the container width to scroll on arrow click |
| triggerUpdate | Bool | no | Programatically trigger a re-render |
`

Hook returns:

`md
| Prop | Type |
| ------------------ | ------------ |
| canScrollPrev | Bool |
| canScrollNext | Bool |
| scrollPrev | Func |
| scrollNext | Func |
| scrollToChildIndex | Func(number) |
``