https://github.com/olivercederborg/use-scrollspy
🕵️ Configurable scrollspy react hook that lets you pair links with page sections
https://github.com/olivercederborg/use-scrollspy
hook hooks react scroll scrollspy spy
Last synced: 4 months ago
JSON representation
🕵️ Configurable scrollspy react hook that lets you pair links with page sections
- Host: GitHub
- URL: https://github.com/olivercederborg/use-scrollspy
- Owner: olivercederborg
- License: mit
- Created: 2022-08-06T16:24:06.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T22:45:07.000Z (over 2 years ago)
- Last Synced: 2025-05-04T00:35:15.331Z (about 1 year ago)
- Topics: hook, hooks, react, scroll, scrollspy, spy
- Language: TypeScript
- Homepage:
- Size: 213 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🕵️ use-scrollspy
[](https://www.npmjs.com/package/use-scrollspy)
[](https://www.npmjs.com/package/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](https://olivercederborg.com) to see the hook in action.
## 📦 Installation
```sh
npm i use-scrollspy
# yarn
yarn add use-scrollspy
# pnpm
pnpm add use-scrollspy
```
## 🚀 Usage
```tsx
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](https://olivercederborg.com) to see the hook in action.
The code can be found [here](https://github.com/olivercederborg/olivercederborg.com/blob/main/app/components/mobile-navigation.tsx#L59-L64).
## 🛣️ Roadmap
- [ ] Add more examples
- [ ] Add more offset options
- [ ] Add possibility to use refs instead of ids
- [ ] Expand to other frameworks: Solid, Svelte, Vue