@infinum/use-scroll-spy

useScrollSpy

Inspiration taken from Chakra-UI docs page

Installation

Install dependencies:

npm add @infinum/use-scroll-spy

Usage

// list of element to spy
const headingIds = ["section-1", "section-2"];

function SectionNavigation() {
	// convert those element to a CSS selectors; in this case `id`s are used
	const selectedId = useScrollSpy(headingIds.map((id) => `[id="${id}"]`));

	return (
		<nav>
			{headingIds.map((id) => (
				<a href={`#${id}`} data-active={selectedId.includes(id)}>
					{id}
				<>
			))}
		</nav>
	);
}

function Example() {
	// content is not rerendered on every heading update
	return (
		<main>
			<SectionNavigation />

			{headingIds.map((id) => (
				<section id={id}>
					<h2>{getSectionTitle(id)}</h2>
					<div>{getSectionContent(id)}</div>
				</section>
			))}
		</main>
	);
}