{"id":21437400,"url":"https://github.com/keidrun/reactstrap-scrollspy","last_synced_at":"2025-07-14T15:30:46.259Z","repository":{"id":35097475,"uuid":"205430670","full_name":"keidrun/reactstrap-scrollspy","owner":"keidrun","description":"Scrollspy library for Reactstrap to create an automatically update navigation easily and flexibly.","archived":false,"fork":false,"pushed_at":"2023-10-27T04:00:45.000Z","size":4341,"stargazers_count":9,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-11T14:00:45.636Z","etag":null,"topics":["bootstrap","bootstrap4","component","navbar","navigation","react","react-component","reactstrap","scroll","scrollspy"],"latest_commit_sha":null,"homepage":"https://keidrun.github.io/reactstrap-scrollspy/","language":"JavaScript","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/keidrun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2019-08-30T17:46:23.000Z","updated_at":"2023-12-22T12:37:57.000Z","dependencies_parsed_at":"2024-11-15T05:38:04.566Z","dependency_job_id":null,"html_url":"https://github.com/keidrun/reactstrap-scrollspy","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/keidrun/reactstrap-scrollspy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keidrun%2Freactstrap-scrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keidrun%2Freactstrap-scrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keidrun%2Freactstrap-scrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keidrun%2Freactstrap-scrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keidrun","download_url":"https://codeload.github.com/keidrun/reactstrap-scrollspy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keidrun%2Freactstrap-scrollspy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264965133,"owners_count":23690188,"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":["bootstrap","bootstrap4","component","navbar","navigation","react","react-component","reactstrap","scroll","scrollspy"],"created_at":"2024-11-23T00:19:32.746Z","updated_at":"2025-07-14T15:30:45.900Z","avatar_url":"https://github.com/keidrun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reactstrap-scrollspy\n\n[![NPM version][npm-image]][npm-url] [![npm module downloads][npm-downloads-image]][npm-downloads-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url] [![License: MIT][license-image]][license-url]\n\nScrollspy library for [Reactstrap](https://github.com/reactstrap/reactstrap) to create an automatically update navigation easily and flexibly.\n\n## Demo\n\n:fire: [Enjoy :+1:](https://keidrun.github.io/reactstrap-scrollspy/) :fire:\n\n## Install\n\n```bash\nnpm i reactstrap-scrollspy\n```\n\nOr\n\n```bash\nyarn add reactstrap-scrollspy\n```\n\n## Usage\n\nThis library provides `Scrollspy` and `ScrollspyNavLink` components.\n\n### Scrollspy\n\nYou should wrap your components in `Scrollspy`. This has mainly two props, which are `names` and `homeIndex`. `names` is used to identify each component wrapped by this, so you should give unique names' list that arranged in order. Then, `homeIndex` is an index number to identify home component such as `Header`.\n\n#### Props\n\n```javascript\ntype Props = {\n  names: Array\u003cstring | null\u003e,\n  homeIndex?: number,\n  topOffset?: string | number,\n  bottomOffset?: string | number,\n  delayMs?: number,\n  children: ChildrenArray\u003cany\u003e,\n}\n```\n\n#### Default Props\n\n```javascript\nScrollspy.defaultProps = {\n  homeIndex: 0,\n  topOffset: '50%',\n  bottomOffset: '40%',\n  delayMs: 50,\n}\n```\n\n#### Example\n\n```javascript\n// @flow\nimport React from 'react'\n\nimport { Scrollspy } from 'reactstrap-scrollspy'\n...\n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003cScrollspy\n        names={['navbar', 'header', 'section-1', 'section-2', 'section-3', null]}\n        homeIndex={1}\n      \u003e\n        \u003cNavbar /\u003e\n        \u003cHeader /\u003e\n        \u003cSection1 /\u003e\n        \u003cSection2 /\u003e\n        \u003cSection3 /\u003e\n        \u003cFooter /\u003e\n      \u003c/Scrollspy\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n### ScrollspyNavLink\n\nYou should wrap `NavLink` provided by `reactstrap` in `ScrollspyNavLink`. This has an one prop, which is `name`. `name` is used to identify a `NavLink` and notify `Scrollspy` of it automatically.\n\n#### Props\n\n```javascript\ntype Props = {\n  name: string,\n  children: Element\u003cany\u003e,\n}\n```\n\n#### Example\n\n```javascript\n// @flow\nimport React, { useState } from 'react'\nimport { Collapse, Navbar as ReactstrapNavbar, NavbarToggler, Nav, NavItem, NavLink } from 'reactstrap'\n\nimport { ScrollspyNavLink } from 'reactstrap-scrollspy'\n\nfunction Navbar() {\n  ...\n  return (\n    \u003cReactstrapNavbar expand=\"md\" fixed=\"top\" className=\"...\"\u003e\n      ...\n        \u003cNav navbar className=\"...\"\u003e\n          \u003cNavItem\u003e\n            \u003cScrollspyNavLink name=\"header\"\u003e\n              \u003cNavLink href=\"#header\"\u003eHome\u003c/NavLink\u003e\n            \u003c/ScrollspyNavLink\u003e\n          \u003c/NavItem\u003e\n          \u003cNavItem\u003e\n            \u003cScrollspyNavLink name=\"section-1\"\u003e\n              \u003cNavLink href=\"#section-1\"\u003eSection1\u003c/NavLink\u003e\n            \u003c/ScrollspyNavLink\u003e\n          \u003c/NavItem\u003e\n          \u003cNavItem\u003e\n            \u003cScrollspyNavLink name=\"section-2\"\u003e\n              \u003cNavLink href=\"#section-2\"\u003eSection2\u003c/NavLink\u003e\n            \u003c/ScrollspyNavLink\u003e\n          \u003c/NavItem\u003e\n          \u003cNavItem\u003e\n            \u003cScrollspyNavLink name=\"section-3\"\u003e\n              \u003cNavLink href=\"#section-3\"\u003eSection3\u003c/NavLink\u003e\n            \u003c/ScrollspyNavLink\u003e\n          \u003c/NavItem\u003e\n        \u003c/Nav\u003e\n      ...\n    \u003c/ReactstrapNavbar\u003e\n  )\n}\n\nexport default Navbar\n```\n\n## Peer dependencies\n\n- [React](https://github.com/facebook/react)\n- ReactDOM\n- [Reactstrap](https://github.com/reactstrap/reactstrap)\n\n[npm-url]: https://npmjs.org/package/reactstrap-scrollspy\n[npm-image]: https://badge.fury.io/js/reactstrap-scrollspy.svg\n[npm-downloads-url]: https://npmjs.org/package/reactstrap-scrollspy\n[npm-downloads-image]: https://img.shields.io/npm/dt/reactstrap-scrollspy.svg\n[travis-url]: https://travis-ci.org/keidrun/reactstrap-scrollspy\n[travis-image]: https://secure.travis-ci.org/keidrun/reactstrap-scrollspy.svg?branch=master\n[depstat-url]: https://david-dm.org/keidrun/reactstrap-scrollspy\n[depstat-image]: https://david-dm.org/keidrun/reactstrap-scrollspy.svg\n[license-url]: https://opensource.org/licenses/MIT\n[license-image]: https://img.shields.io/badge/License-MIT-yellow.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeidrun%2Freactstrap-scrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeidrun%2Freactstrap-scrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeidrun%2Freactstrap-scrollspy/lists"}