A React hook to build an active scrolling menu navigation
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
CleanShot.2022-07-01.at.09.50.31.mp4