🕵️ use-scrollspy

Configurable scrollspy react hook for pairing anchor links with page sections.

🤔 What is it?

The idea is to have a simple and easy to use hook that lets you pair page sections with links, to display which section is currently active.

Check out my personal website to see the hook in action.

📦 Installation

npm i use-scrollspy

# yarn
yarn add use-scrollspy

# pnpm
pnpm add use-scrollspy

🚀 Usage

import { useScrollspy } from 'use-scrollspy'


useScrollspy({
  ids: ['intro', 'projects', 'about', 'contact'], // ids of the sections to watch
  hrefs: ['/#intro', '/#projects', '/#about', '/#contact'], // hrefs of the links to activate when section is active
  offset: 'topCenter', // offset for when the section should be considered active
  activeClass: 'active-nav-link', // class to apply to links when their section is active
})

// returns currently active id, in case you need it
const activeId = useScrollspy({...})

📝 Example

More examples will be added in the near future

Check out my personal website to see the hook in action.
The code can be found here.

🛣️ Roadmap

• Add more examples
• Add more offset options
• Add possibility to use refs instead of ids
• Expand to other frameworks: Solid, Svelte, Vue