react-active-menu v0.0.14

react-active-menu

A React hook to build an active scrolling menu navigation.

Installation

npm i react-active-menu

Getting Started

Initialize hook:

const {
  activeId,
  registerContainer,
  registerSection,
  registerTrigger,
} = useActiveMenu();

Register triggers with unique IDs:

<button ref={registerTrigger('section-1')}>
  Section 1
</button>

Register sections with unique IDs:

<section ref={registerSection('section-1')}>
  <h2>Section 2</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</section>

Register scrollable container:

<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

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

With Container

https://user-images.githubusercontent.com/1900645/176918185-0fbf7484-f703-416f-8a32-fb624b3ea428.mp4