Skip to content

🕵️ Configurable scrollspy react hook that lets you pair links with page sections

License

Notifications You must be signed in to change notification settings

olivercederborg/use-scrollspy

Repository files navigation

🕵️ use-scrollspy

npm npm bundle size

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

About

🕵️ Configurable scrollspy react hook that lets you pair links with page sections

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published