https://github.com/dimslaev/scrollnav

Nicely overflowing navigation for React.
https://github.com/dimslaev/scrollnav

Last synced: 13 days ago
JSON representation

Nicely overflowing navigation for React.

• Host: GitHub
• URL: https://github.com/dimslaev/scrollnav
• Owner: dimslaev
• Created: 2020-11-20T18:59:07.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-11T19:42:09.000Z (over 1 year ago)
• Last Synced: 2024-10-31T18:56:33.511Z (20 days ago)
• Language: JavaScript
• Homepage: https://tv0ej6.csb.app/
• Size: 311 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
### Scrollnav v1.2.2

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 (

    

      


        
nav item 1

        
nav item 2

        
nav item 3

        
nav item 4

      

      {canScrollPrev && <}

      {canScrollNext && >}

    

  );

};

```


#### 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) |

```