{"id":15398173,"url":"https://github.com/emasuriano/react-scroll-section","last_synced_at":"2025-04-13T08:19:23.397Z","repository":{"id":37986596,"uuid":"154844983","full_name":"EmaSuriano/react-scroll-section","owner":"EmaSuriano","description":"React library to provide a declarative scroll to between sections","archived":false,"fork":false,"pushed_at":"2024-02-01T01:58:29.000Z","size":2650,"stargazers_count":115,"open_issues_count":25,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T05:52:35.803Z","etag":null,"topics":["declarative","react","scroll","section"],"latest_commit_sha":null,"homepage":"https://react-scroll-section.netlify.app","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/EmaSuriano.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-26T14:12:40.000Z","updated_at":"2025-02-11T13:35:27.000Z","dependencies_parsed_at":"2023-02-08T10:01:44.405Z","dependency_job_id":"8853a87b-18c0-474a-9ad6-7c3e796e1c0b","html_url":"https://github.com/EmaSuriano/react-scroll-section","commit_stats":{"total_commits":348,"total_committers":6,"mean_commits":58.0,"dds":0.5689655172413793,"last_synced_commit":"9bed1046fbcceb5770ac8ccec863cedca1f876dd"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-scroll-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-scroll-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-scroll-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-scroll-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmaSuriano","download_url":"https://codeload.github.com/EmaSuriano/react-scroll-section/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245755672,"owners_count":20667027,"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":["declarative","react","scroll","section"],"created_at":"2024-10-01T15:41:23.659Z","updated_at":"2025-03-27T00:09:54.256Z","avatar_url":"https://github.com/EmaSuriano.png","language":"TypeScript","readme":"# react-scroll-section\n\n[![Master](https://github.com/EmaSuriano/react-scroll-section/actions/workflows/master.yml/badge.svg)](https://github.com/EmaSuriano/react-scroll-section/actions/workflows/master.yml)\n[![npm version](https://img.shields.io/npm/v/react-scroll-section.svg)](https://www.npmjs.org/package/react-scroll-section)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/8e8c9915-5b0a-4cde-83e7-13747fb01f30/deploy-status)](https://app.netlify.com/sites/react-scroll-section/deploys)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./packages/demo/src/logo.svg\" alt=\"React Scroll Section logo\"/\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eA declarative solution to vertically navigate your React App\u003c/h3\u003e\n\n## [Live demo ✨](https://react-scroll-section.netlify.app/)\n\n## Why you should use it? 🤔\n\nWhen you think about implementing a `scrollTo` functionality in a website the first thing it will your mind will be jQuery, using the following line of code:\n\n```javascript\n$('#target').scroll();\n```\n\nI won't deny that actually works, but the problem comes when you start working with frameworks based on component, like React.\n\nManage the navigation to another section and which section can be hard task without a state management library.\n\nThis library will help you to avoid thinking all the possible edges cases and focus on the final result, which is just provide an easy navigation inside your app.\n\n## Built with 🔧\n\nJust React! Using the following API:\n\n- Context: using the of `\u003cConsumer /\u003e` and `\u003cProvider /\u003e`.\n- Ref: new `createRef` API\n- Hooks: `useScrollSection` and `useScrollSections` to interact with the registered sections.\n\n## Installation\n\n```bash\n# npm\n\u003e npm install react-scroll-section\n\n# yarn\n\u003e yarn add react-scroll-section\n```\n\n## Usage\n\nThe library provides the following components:\n\n- `ScrollingProvider`: responsible to link `Section` and `SectionLink` and know which `Section` is selected.\n- `Section`: renders a `\u003csection /\u003e` tag that receives an ID and register itself in `ScrollingProvider`.\n- `useScrollSection`: React Hook given the `id` of the section returns if the section is `selected` and a callback to scroll to it.\n- `useScrollSection`: returns an array of all the `sections` with `id`, `selected` and `scrollTo`.\n\n## Examples\n\n### Using `SectionLink` (Static Menu)\n\n```javascript\nimport React from 'react';\nimport {\n  ScrollingProvider,\n  useScrollSection,\n  Section,\n} from 'react-scroll-section';\n\nconst StaticMenu = () =\u003e {\n  const homeSection = useScrollSection('home');\n  const aboutSection = useScrollSection('about');\n\n  return (\n    \u003cul\u003e\n      \u003cli onClick={homeSection.onClick} selected={homeSection.selected}\u003e\n        Home\n      \u003c/li\u003e\n      \u003cli onClick={aboutSection.onClick} selected={aboutSection.selected}\u003e\n        About\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003cScrollingProvider\u003e\n    \u003cStaticMenu /\u003e\n    \u003cSection id=\"home\"\u003eMY HOME\u003c/Section\u003e\n    \u003cSection id=\"about\"\u003eABOUT ME\u003c/Section\u003e\n  \u003c/ScrollingProvider\u003e\n);\n```\n\n### Using `SectionLinks` (Dynamic Menu)\n\n```javascript\nimport React from 'react';\nimport {\n  ScrollingProvider,\n  useScrollSections,\n  Section,\n} from 'react-scroll-section';\n\nexport const DynamicMenu = () =\u003e {\n  const sections = useScrollSections();\n\n  return (\n    \u003cul\u003e\n      {sections.map(({ id, onClick, selected }) =\u003e (\n        \u003cli key={id} onClick={onClick} selected={selected}\u003e\n          {id.toUpperCase()}\n        \u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003cScrollingProvider\u003e\n    \u003cDynamicMenu /\u003e\n    \u003cSection id=\"home\"\u003eHome section\u003c/Section\u003e\n    \u003cSection id=\"about\"\u003eAbout section\u003c/Section\u003e\n  \u003c/ScrollingProvider\u003e\n);\n```\n\n## Props\n\n### ScrollingProvider\n\n| Property         | Type                         | Required | Default  | Description                                               |\n| ---------------- | ---------------------------- | -------- | -------- | --------------------------------------------------------- |\n| `debounceDelay`  | `number`                     | false    | 50       | time to wait until the calculation of the current section |\n| `scrollBehavior` | [`string`][scroll-behaviour] | false    | \"smooth\" | scrolling style                                           |\n| `children`       | `ReactNode`                  | false    | null     | React component                                           |\n| `offset`         | `number`                     | false    | null     | Vertical offset the modifies the final scrolling position |\n\n[scroll-behaviour]: https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior\n\n### Section\n\n| Property   | Type        | Required | Default | Description     |\n| ---------- | ----------- | -------- | ------- | --------------- |\n| `children` | `ReactNode` | false    | null    | Section content |\n| `id`       | `string`    | true     | -       | Section ID      |\n\n## Contributing 🧑‍💼\n\nI'm always open for suggestions and improvements, so don't hesitate to open an Issue or new Pull Request.\n\n### Setup project\n\nThis project is using Yarn workspace, therefore check that you have Yarn as your package manager.\n\n```sh\n# Check if you have you Yarn install\n\u003e yarn -v\n1.22.18\n\n# Install dependencies\n\u003e yarn\n```\n\n### Commands\n\n```sh\n# Builds library\n\u003e yarn build\n\n# Starts demo app locally\n\u003e yarn start\n\n# Run E2E tests\n\u003e yarn test\n\n# Build library + demo app\n\u003e yarn build:demo\n```\n\n## License 🔖\n\nMIT.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femasuriano%2Freact-scroll-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femasuriano%2Freact-scroll-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femasuriano%2Freact-scroll-section/lists"}