react-active-menu

A React hook to build an active scrolling menu navigation.

Installation

npm i react-active-menu

Getting Started

Initialize hook:

const {
  active,
  handleTriggerClick,
  registerSectionRef,
  registerTriggerRef,
} = useActiveMenu();

Register triggers with unique IDs:

<button
  className={active === 'section-1' ? 'active' : undefined}
  onClick={handleTriggerClick('section-1')}
  ref={registerTriggerRef('section-1')}
>
  Section 1
</button>

Register sections with unique IDs:

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

Demo

Edit brave-jackson-gng1rz

CleanShot.2022-07-01.at.09.50.31.mp4

GitHub

View Github