{"id":15837302,"url":"https://github.com/afeiship/react-scrollspy-nav","last_synced_at":"2026-04-30T01:36:37.405Z","repository":{"id":96088153,"uuid":"128044905","full_name":"afeiship/react-scrollspy-nav","owner":"afeiship","description":"React scrollspy nav component.","archived":false,"fork":false,"pushed_at":"2024-11-13T03:23:30.000Z","size":487,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-07T10:46:03.459Z","etag":null,"topics":["component","nav","react","scrollspy"],"latest_commit_sha":null,"homepage":"https://afeiship.github.io/react-scrollspy-nav/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/afeiship.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2018-04-04T10:11:13.000Z","updated_at":"2024-11-13T03:23:34.000Z","dependencies_parsed_at":"2024-06-17T15:02:32.066Z","dependency_job_id":"5a85ef7c-e98a-434c-92ff-17cd12360069","html_url":"https://github.com/afeiship/react-scrollspy-nav","commit_stats":{"total_commits":104,"total_committers":1,"mean_commits":104.0,"dds":0.0,"last_synced_commit":"ab8482db608734f32f993aecfad51197ba7b1cbc"},"previous_names":["afeiship/react-scrollspy-nav"],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-scrollspy-nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-scrollspy-nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-scrollspy-nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-scrollspy-nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afeiship","download_url":"https://codeload.github.com/afeiship/react-scrollspy-nav/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246671413,"owners_count":20815176,"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":["component","nav","react","scrollspy"],"created_at":"2024-10-05T15:21:45.744Z","updated_at":"2026-04-30T01:36:37.369Z","avatar_url":"https://github.com/afeiship.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-scrollspy-nav\n\u003e React scrollspy nav component.\n\n[![version][version-image]][version-url]\n[![license][license-image]][license-url]\n[![size][size-image]][size-url]\n[![download][download-image]][download-url]\n\n## installation\n```shell\nyarn add @jswork/react-scrollspy-nav\n```\n\n## usage\n  ```js\n  import ReactScrollspyNav from '@jswork/react-scrollspy-nav';\n  import ReactList from '@jswork/react-list';\n  import '@jswork/react-scrollspy-nav/dist/style.scss';\n  import cx from 'classnames';\n  import React, { useEffect, useState } from 'react';\n\n  // @title: Tailwind classes used predict\n  // @description: DO NOT DELETE THIS COMMENT\n  // @enums: 'text-red-500'\n\n  function App() {\n    const items = ['Home', 'About', 'Services', 'Contact'];\n    const [useRoot, setUseRoot] = useState(true);\n    const containerRef = React.useRef\u003cHTMLDivElement\u003e(null);\n    const [dom, setDom] = useState\u003cHTMLDivElement | null\u003e(null);\n\n    useEffect(() =\u003e {\n      setDom(containerRef.current);\n    }, [containerRef]);\n\n    return (\n      \u003cdiv\n        className={cx('m-10 p-6 shadow bg-gray-100 text-gray-80', {\n          'h-[600px] overflow-y-auto': useRoot,\n        })}\n        ref={containerRef}\u003e\n        \u003cdiv className=\"badge badge-warning absolute right-0 top-0 m-4\"\u003eBuild Time: {BUILD_TIME}\u003c/div\u003e\n        \u003clabel htmlFor=\"\"\u003e\n          \u003cspan\u003eUseRoot: {useRoot}\u003c/span\u003e\n          \u003cinput type=\"checkbox\" checked={useRoot} onChange={(e) =\u003e setUseRoot(e.target.checked)} /\u003e\n        \u003c/label\u003e\n        \u003ch1\u003ereact-scrollspy-nav\u003c/h1\u003e\n        \u003cReactScrollspyNav\n          offset={0}\n          containerElement={useRoot ? dom : null}\n          nav={(navRef, { activeIndex }) =\u003e {\n            return (\n              \u003cdiv\n                ref={navRef as React.RefObject\u003cHTMLDivElement\u003e}\n                className=\"sticky top-0 nav-container bg-green-200 y-5 text-gray-80\"\u003e\n                \u003cReactList items={items} template={({ item, index }) =\u003e {\n                  return \u003ca key={index} href={`#${item.toLowerCase()}`}\n                            className={cx({ 'bg-red-500 text-white': index === activeIndex })}\u003e{item}\u003c/a\u003e;\n                }} /\u003e\n              \u003c/div\u003e\n            );\n          }}\n          className={cx('wp-8 p-5 mx-auto max-w-[600px] bg-slate-200')}\u003e\n          \u003cul\u003e\n            \u003ch3 className=\"text-red-600\" data-spy-id=\"home\" id=\"home\"\u003e\n              Home\n            \u003c/h3\u003e\n            \u003cdiv className=\"p-4 bg-white rounded-md\"\u003e\n              \u003cli\u003e\n                菩提本无树，明镜亦非台，本来无一物，何处惹尘埃。空灵的境界，不染世俗，不受困于贪念囹圄。一份真情，种在心田，汲取日月精华，沐浴甘甜雨露，根深叶茂，葱茏浓郁。历经岁月沧桑，风虐霜寒，一年又一年，收了又收，几度轮回，滤掉了浅薄，滤掉了浮华，滤掉了嗔痴，滤掉了怨恨，滤掉了冷漠，剩下的大概就是慈悲了吧！轻如云，重如山，浅如白，深如黑，柔如水，坚如石，如天对地，雨露对花朵，无声无息，无私无欲。电影《致我们终将逝去的青春》\n                里郑微在结尾说过这样一句话：“爱一个人应该像爱祖国，爱山川，爱河流……”咋一听，觉得够矫情，细想锥心不已。爱就是爱了，一个人的事，无关他人，无需回应，无需复返，正如山川的静默不语，河流的奔流不息。需要经过多少沉淀，才会有如此厚重绵延的感悟？有即是无，无即是有，有无之间，一切在心。\n              \u003c/li\u003e\n              \u003cli\u003e\n                一花一叶一菩提，一人一心一世界，红尘滚滚，波涌云翳，有人追求乘风破浪，叱咤风云，翻手是云，复手是雨；有人向往仗剑天涯，闲云野鹤，红尘客栈，只为一份豪情逸致，自在逍遥；有人喜欢鲜花簇拥，觥筹交错；有人喜欢清茶一杯，邀月对饮\n                。人各有志， 各有所好，不做褒贬评价。\n              \u003c/li\u003e\n              \u003cli\u003e\n                不站在道德制高点去审视自己和别人，世界是充满哲学的，没有绝对的对错是非，中国古代圣贤孔夫子提出的中庸之道可以让我们变得智慧，平和，寬宥，坦然，恬淡，圆润，内敛。著名作家王小波在一篇文章中写到：“有些人认为，人应该充满境界高尚的思想，去掉格调低下的思想。这种说法听上去美妙，却使我感到莫大的恐慌。因为高尚的思想和低下的思想的总和就是我自己;倘若去掉一部分，我是谁就成了问题。\n                ”或许，让自己变得更真实，更有智慧才是我们应该去努力的方向， 让自己客观的存在，\n                不刻意去迎合那些所谓高尚境界思想的人云亦云，不做乌合之众，保持真我，接纳缺憾，包容和尊重不完美，正如赫拉克利特所言：善与恶为一，正如上坡和下坡是同一条路。\n              \u003c/li\u003e\n              \u003cli\u003e\n                一切量力而行，不好高骛远，不盲目崇拜，守住初衷，遁着心的方向前行。牡丹雍容华贵，玫瑰艳丽明媚，百合纯洁高雅，罂粟高傲冷艳……每一种花都拥有各自独特的美，每个人都有其美好的棱面，只要热爱生命，热爱生活，就会绽放各自独特的魅力。不要太在乎别人眼里的自己是什么样子，事实上，把你真正看在眼里，放在心上的人没几个。你是在阳春白雪里浪漫开怀，还是在水深火热中遭受煎熬，对旁人来说都不重要，而真正在乎你的人，他唯一的希望就是你开心快乐，带着一份美好且行且珍惜！得意的时候，好像拥有整个世界，世界也拥你入怀，有朝一日，你会发现，你的离开并没有让这个世界有任何改变。正所谓“雁渡寒潭，雁过而潭不留影。风吹疏竹，风过而竹不留声。”\n              \u003c/li\u003e\n              \u003cli\u003e\n                人生就是一场修行，\n                宋代禅宗大师青原行思提出参禅的三重境界：参禅之初，看山是山，看水是水；禅有悟时，看山不是山，看水不是水；禅中彻悟，看山仍然山，看水仍然是水。佛家讲究入世与出世，于尘世间理会佛理。经历过世事繁杂的磨砺，通过不断的思考和感悟，你终归会明白\n                “人本是人，不必刻意去做人；世本是世，无须精心去处世”\n                。目无杂物，心无芜杂，返璞归真，回归静谧，朴素简约，不执念，不违心，一切随心随性随缘，来去得失间，不喜形于色，澎湃激荡，也不悲伤凄凉，逆流成河。\n                让消逝的消逝，让停留的停留，因果自然。\n              \u003c/li\u003e\n            \u003c/div\u003e\n            \u003ch3 className=\"text-red-600\" data-spy-id=\"about\" id=\"about\"\u003e\n              About\n            \u003c/h3\u003e\n            \u003cdiv className=\"p-4 bg-white rounded-md\"\u003e\n              \u003cli\u003e\n                携一份美好幽居在禅意里，\n                从容淡然，拭去浮华，显露本真，就像是一幅留白水墨山水画，率性自然，意境幽远，没有浓墨重彩的渲染，没有争奇斗艳的热烈，所有的意蕴尽在那简单流畅的点线里缱绻，晕染。\n              \u003c/li\u003e\n              \u003cli\u003e人生，继续；禅意，幽幽。我，在路上。\u003c/li\u003e\n              \u003cli\u003e\n                菩提本无树，明镜亦非台，本来无一物，何处惹尘埃。空灵的境界，不染世俗，不受困于贪念囹圄。一份真情，种在心田，汲取日月精华，沐浴甘甜雨露，根深叶茂，葱茏浓郁。历经岁月沧桑，风虐霜寒，一年又一年，收了又收，几度轮回，滤掉了浅薄，滤掉了浮华，滤掉了嗔痴，滤掉了怨恨，滤掉了冷漠，剩下的大概就是慈悲了吧！轻如云，重如山，浅如白，深如黑，柔如水，坚如石，如天对地，雨露对花朵，无声无息，无私无欲。电影《致我们终将逝去的青春》\n                里郑微在结尾说过这样一句话：“爱一个人应该像爱祖国，爱山川，爱河流……”咋一听，觉得够矫情，细想锥心不已。爱就是爱了，一个人的事，无关他人，无需回应，无需复返，正如山川的静默不语，河流的奔流不息。需要经过多少沉淀，才会有如此厚重绵延的感悟？有即是无，无即是有，有无之间，一切在心。\n              \u003c/li\u003e\n              \u003cli\u003e\n                一花一叶一菩提，一人一心一世界，红尘滚滚，波涌云翳，有人追求乘风破浪，叱咤风云，翻手是云，复手是雨；有人向往仗剑天涯，闲云野鹤，红尘客栈，只为一份豪情逸致，自在逍遥；有人喜欢鲜花簇拥，觥筹交错；有人喜欢清茶一杯，邀月对饮\n                。人各有志， 各有所好，不做褒贬评价。\n              \u003c/li\u003e\n              \u003cli\u003e\n                不站在道德制高点去审视自己和别人，世界是充满哲学的，没有绝对的对错是非，中国古代圣贤孔夫子提出的中庸之道可以让我们变得智慧，平和，寬宥，坦然，恬淡，圆润，内敛。著名作家王小波在一篇文章中写到：“有些人认为，人应该充满境界高尚的思想，去掉格调低下的思想。这种说法听上去美妙，却使我感到莫大的恐慌。因为高尚的思想和低下的思想的总和就是我自己;倘若去掉一部分，我是谁就成了问题。\n                ”或许，让自己变得更真实，更有智慧才是我们应该去努力的方向， 让自己客观的存在，\n                不刻意去迎合那些所谓高尚境界思想的人云亦云，不做乌合之众，保持真我，接纳缺憾，包容和尊重不完美，正如赫拉克利特所言：善与恶为一，正如上坡和下坡是同一条路。\n              \u003c/li\u003e\n            \u003c/div\u003e\n            \u003ch3 className=\"text-red-600\" data-spy-id=\"services\" id=\"services\"\u003e\n              Services\n            \u003c/h3\u003e\n            \u003cdiv className=\"p-4 bg-white rounded-md\"\u003e\n              \u003cli\u003e\n                一切量力而行，不好高骛远，不盲目崇拜，守住初衷，遁着心的方向前行。牡丹雍容华贵，玫瑰艳丽明媚，百合纯洁高雅，罂粟高傲冷艳……每一种花都拥有各自独特的美，每个人都有其美好的棱面，只要热爱生命，热爱生活，就会绽放各自独特的魅力。不要太在乎别人眼里的自己是什么样子，事实上，把你真正看在眼里，放在心上的人没几个。你是在阳春白雪里浪漫开怀，还是在水深火热中遭受煎熬，对旁人来说都不重要，而真正在乎你的人，他唯一的希望就是你开心快乐，带着一份美好且行且珍惜！得意的时候，好像拥有整个世界，世界也拥你入怀，有朝一日，你会发现，你的离开并没有让这个世界有任何改变。正所谓“雁渡寒潭，雁过而潭不留影。风吹疏竹，风过而竹不留声。”\n              \u003c/li\u003e\n              \u003cli\u003e\n                人生就是一场修行，\n                宋代禅宗大师青原行思提出参禅的三重境界：参禅之初，看山是山，看水是水；禅有悟时，看山不是山，看水不是水；禅中彻悟，看山仍然山，看水仍然是水。佛家讲究入世与出世，于尘世间理会佛理。经历过世事繁杂的磨砺，通过不断的思考和感悟，你终归会明白\n                “人本是人，不必刻意去做人；世本是世，无须精心去处世”\n                。目无杂物，心无芜杂，返璞归真，回归静谧，朴素简约，不执念，不违心，一切随心随性随缘，来去得失间，不喜形于色，澎湃激荡，也不悲伤凄凉，逆流成河。\n                让消逝的消逝，让停留的停留，因果自然。\n              \u003c/li\u003e\n              \u003cli\u003e\n                携一份美好幽居在禅意里，\n                从容淡然，拭去浮华，显露本真，就像是一幅留白水墨山水画，率性自然，意境幽远，没有浓墨重彩的渲染，没有争奇斗艳的热烈，所有的意蕴尽在那简单流畅的点线里缱绻，晕染。\n              \u003c/li\u003e\n              \u003cli\u003e人生，继续；禅意，幽幽。我，在路上。\u003c/li\u003e\n            \u003c/div\u003e\n            \u003ch3 className=\"text-red-600\" data-spy-id=\"contact\" id=\"contact\"\u003e\n              Contact\n            \u003c/h3\u003e\n            \u003cdiv className=\"p-4 bg-white rounded-md\"\u003e\n              \u003cli\u003e\n                一切量力而行，不好高骛远，不盲目崇拜，守住初衷，遁着心的方向前行。牡丹雍容华贵，玫瑰艳丽明媚，百合纯洁高雅，罂粟高傲冷艳……每一种花都拥有各自独特的美，每个人都有其美好的棱面，只要热爱生命，热爱生活，就会绽放各自独特的魅力。不要太在乎别人眼里的自己是什么样子，事实上，把你真正看在眼里，放在心上的人没几个。你是在阳春白雪里浪漫开怀，还是在水深火热中遭受煎熬，对旁人来说都不重要，而真正在乎你的人，他唯一的希望就是你开心快乐，带着一份美好且行且珍惜！得意的时候，好像拥有整个世界，世界也拥你入怀，有朝一日，你会发现，你的离开并没有让这个世界有任何改变。正所谓“雁渡寒潭，雁过而潭不留影。风吹疏竹，风过而竹不留声。”\n              \u003c/li\u003e\n              \u003cli\u003e\n                人生就是一场修行，\n                宋代禅宗大师青原行思提出参禅的三重境界：参禅之初，看山是山，看水是水；禅有悟时，看山不是山，看水不是水；禅中彻悟，看山仍然山，看水仍然是水。佛家讲究入世与出世，于尘世间理会佛理。经历过世事繁杂的磨砺，通过不断的思考和感悟，你终归会明白\n                “人本是人，不必刻意去做人；世本是世，无须精心去处世”\n                。目无杂物，心无芜杂，返璞归真，回归静谧，朴素简约，不执念，不违心，一切随心随性随缘，来去得失间，不喜形于色，澎湃激荡，也不悲伤凄凉，逆流成河。\n                让消逝的消逝，让停留的停留，因果自然。\n              \u003c/li\u003e\n              \u003cli\u003e\n                携一份美好幽居在禅意里，\n                从容淡然，拭去浮华，显露本真，就像是一幅留白水墨山水画，率性自然，意境幽远，没有浓墨重彩的渲染，没有争奇斗艳的热烈，所有的意蕴尽在那简单流畅的点线里缱绻，晕染。\n              \u003c/li\u003e\n              \u003cli\u003e人生，继续；禅意，幽幽。我，在路上。\u003c/li\u003e\n            \u003c/div\u003e\n          \u003c/ul\u003e\n        \u003c/ReactScrollspyNav\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n## preview\n- https://afeiship.github.io/react-scrollspy-nav/\n\n## license\nCode released under [the MIT license](https://github.com/afeiship/react-scrollspy-nav/blob/master/LICENSE.txt).\n\n[version-image]: https://img.shields.io/npm/v/@jswork/react-scrollspy-nav\n[version-url]: https://npmjs.org/package/@jswork/react-scrollspy-nav\n\n[license-image]: https://img.shields.io/npm/l/@jswork/react-scrollspy-nav\n[license-url]: https://github.com/afeiship/react-scrollspy-nav/blob/master/LICENSE.txt\n\n[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/react-scrollspy-nav\n[size-url]: https://github.com/afeiship/react-scrollspy-nav/blob/master/dist/react-scrollspy-nav.min.js\n\n[download-image]: https://img.shields.io/npm/dm/@jswork/react-scrollspy-nav\n[download-url]: https://www.npmjs.com/package/@jswork/react-scrollspy-nav\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafeiship%2Freact-scrollspy-nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafeiship%2Freact-scrollspy-nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafeiship%2Freact-scrollspy-nav/lists"}