{"id":16212550,"url":"https://github.com/olivercederborg/use-scrollspy","last_synced_at":"2026-02-22T14:33:13.595Z","repository":{"id":54450135,"uuid":"521996850","full_name":"olivercederborg/use-scrollspy","owner":"olivercederborg","description":"🕵️ Configurable scrollspy react hook that lets you pair links with page sections","archived":false,"fork":false,"pushed_at":"2024-02-12T22:45:07.000Z","size":218,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T00:35:15.331Z","etag":null,"topics":["hook","hooks","react","scroll","scrollspy","spy"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olivercederborg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["olivercederborg"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-08-06T16:24:06.000Z","updated_at":"2023-03-10T13:59:48.000Z","dependencies_parsed_at":"2024-10-27T20:28:24.157Z","dependency_job_id":"8b0b267e-c81f-48b4-8e73-f854f2a0b611","html_url":"https://github.com/olivercederborg/use-scrollspy","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"e60cd53ede867034435d0b7505e769b78b43cea8"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/olivercederborg/use-scrollspy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olivercederborg%2Fuse-scrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olivercederborg%2Fuse-scrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olivercederborg%2Fuse-scrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olivercederborg%2Fuse-scrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olivercederborg","download_url":"https://codeload.github.com/olivercederborg/use-scrollspy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olivercederborg%2Fuse-scrollspy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260245005,"owners_count":22980121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hook","hooks","react","scroll","scrollspy","spy"],"created_at":"2024-10-10T10:52:55.553Z","updated_at":"2026-02-22T14:33:08.531Z","avatar_url":"https://github.com/olivercederborg.png","language":"TypeScript","funding_links":["https://github.com/sponsors/olivercederborg"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg height=\"256\" src=\"https://mj-gallery.com/6c010f60-f86b-4a99-84b0-b98177497205/grid_0.png\" /\u003e\n\n\n# 🕵️ use-scrollspy\n\n[![npm](https://img.shields.io/npm/v/use-scrollspy)](https://www.npmjs.com/package/use-scrollspy)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-scrollspy)](https://www.npmjs.com/package/use-scrollspy)\n\nConfigurable scrollspy react hook for pairing anchor links with page sections.\n\u003c/div\u003e\n\u003cbr\u003e\n\n\n## 🤔 What is it?\n\nThe 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.\n\nCheck out my [personal website](https://olivercederborg.com) to see the hook in action.\n\n## 📦 Installation\n\n```sh\nnpm i use-scrollspy\n\n# yarn\nyarn add use-scrollspy\n\n# pnpm\npnpm add use-scrollspy\n```\n\n## 🚀 Usage\n\n```tsx\nimport { useScrollspy } from 'use-scrollspy'\n\n\nuseScrollspy({\n  ids: ['intro', 'projects', 'about', 'contact'], // ids of the sections to watch\n  hrefs: ['/#intro', '/#projects', '/#about', '/#contact'], // hrefs of the links to activate when section is active\n  offset: 'topCenter', // offset for when the section should be considered active\n  activeClass: 'active-nav-link', // class to apply to links when their section is active\n})\n\n// returns currently active id, in case you need it\nconst activeId = useScrollspy({...})\n```\n\n## 📝 Example\n\n_More examples will be added in the near future_\n\nCheck out my [personal website](https://olivercederborg.com) to see the hook in action.\u003cbr\u003e\nThe code can be found [here](https://github.com/olivercederborg/olivercederborg.com/blob/main/app/components/mobile-navigation.tsx#L59-L64).\n\n\n## 🛣️ Roadmap\n\n- [ ] Add more examples\n- [ ] Add more offset options\n- [ ] Add possibility to use refs instead of ids\n- [ ] Expand to other frameworks: Solid, Svelte, Vue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folivercederborg%2Fuse-scrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folivercederborg%2Fuse-scrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folivercederborg%2Fuse-scrollspy/lists"}