react-active-menu
Version:
A React hook to build an active scrolling menu navigation.
89 lines (67 loc) • 2.05 kB
Markdown
# react-active-menu
A React hook to build an active scrolling menu navigation.
## Installation
```
npm i react-active-menu
```
## Getting Started
Initialize hook:
```javascript
const {
activeId,
registerContainer,
registerSection,
registerTrigger,
} = useActiveMenu();
```
Register triggers with unique IDs:
```javascript
<button ref={registerTrigger('section-1')}>
Section 1
</button>
```
Register sections with unique IDs:
```javascript
<section ref={registerSection('section-1')}>
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
```
Register scrollable container:
```javascript
<div ref={registerContainer}>
<section ref={registerSection('section-1')}>
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section ref={registerSection('section-1')}>
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</div>
```
## API
```javascript
const {
activeId,
registerContainer,
registerSection,
registerTrigger,
} = useActiveMenu({
activeClassName,
offset,
smooth,
});
```
**Options**
|Key|Type|Default|Description|
|-|-|-|-|
|activeClassName|string|'active'|Specifies the className that gets added to the active trigger.|
|offset|number|0|Specifies the threshold distance (px) from the container top where the active section detection gets triggered.|
|smooth|boolean|false|Specifies whether scrolling to each section should animate smoothly or not when a trigger is clicked.|
## Demos
### Without Container
[](https://codesandbox.io/s/react-active-menu-full-screen-ze7slj?fontsize=14&hidenavigation=1&theme=dark)
### With Container
[](https://codesandbox.io/s/react-active-menu-containerized-gng1rz?fontsize=14&hidenavigation=1&theme=dark)
https://user-images.githubusercontent.com/1900645/176918185-0fbf7484-f703-416f-8a32-fb624b3ea428.mp4