1.0.2 • Published 2 years ago
use-simple-scroll-spy v1.0.2
use-simple-scroll-spy
Tiny scroll spy react hook that just needs the element ids
Installation
pnpm i use-simply-scroll-spy
yarn add use-simply-scroll-spy
npm i use-simply-scroll-spy
Usage
const sectionIds = ["section-1", "section-2"];
const MyComponent: React.FC = () => {
const activeIndex = useSimpleScrollSpy(sectionIds);
return (
<>
<div id="section-1">My content </div>
<div id="section-2">My content </div>
</>
);
};
The code above is a very simply way of using this hook but the general idea is to track based on the URL hash. If you hit the page with #section-2
as the default section, the activeIndex
will be set propertly.
My personal motivation for this project was the need in a very framework-agnostic in order to create an header with the active section