{"id":21124502,"url":"https://github.com/zauberware/react-scroll-to","last_synced_at":"2025-10-26T22:46:10.721Z","repository":{"id":33278270,"uuid":"155734398","full_name":"zauberware/react-scroll-to","owner":"zauberware","description":"Scroll to ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0).","archived":false,"fork":false,"pushed_at":"2023-01-04T16:42:38.000Z","size":760,"stargazers_count":3,"open_issues_count":12,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-05T18:06:39.025Z","etag":null,"topics":["react","react-component","react-scroll","reactjs","scrollto"],"latest_commit_sha":null,"homepage":null,"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/zauberware.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}},"created_at":"2018-11-01T15:17:12.000Z","updated_at":"2019-06-24T18:36:21.000Z","dependencies_parsed_at":"2023-01-15T00:30:41.367Z","dependency_job_id":null,"html_url":"https://github.com/zauberware/react-scroll-to","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-scroll-to","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-scroll-to/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-scroll-to/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-scroll-to/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zauberware","download_url":"https://codeload.github.com/zauberware/react-scroll-to/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225465299,"owners_count":17478522,"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":["react","react-component","react-scroll","reactjs","scrollto"],"created_at":"2024-11-20T04:16:45.699Z","updated_at":"2025-10-26T22:46:05.703Z","avatar_url":"https://github.com/zauberware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-scroll-to\nScroll to named ankers on your page. Scroll to Provider for React (^16.3.0) .. or better (^16.6.0)..\n\n## Installation\n```\nnpm install @zauberware/react-scroll-to\n```\n\n### ScrollToProvider\n\nInclude the ScrollToProvider in your App by wrapping it around your App Component.\n\n```\n# src/index.js\nimport ScrollToProvider from '@zauberware/react-scroll-to'\n\n\n# wrap scroll to Provider\n\u003cScrollToProvider\u003e\n  \u003cApp /\u003e\n\u003c/ScrollToProvider\u003e\n\n```\n\n### NEW with v 0.2.1\n\n### ScrollToActionElement\nYou can use the included ScrollToAction element with a scrollTo action already attached.\n\n```\n\n# Renders a passed Component and adds 'active' property\n\u003cScrollToActionElement Parent={Button} target='mysection' /\u003e\n\n```\nThe rendered element has the property active='active', so you can use it with styled-components\n\n### Usage\n\n#### addScrollRef()\n\nAdd a ref to a component where you want to scroll to:\n\n```\nconst { addScrollRef } = this.context\n\u003cdiv ref={node =\u003e addScrollRef('mysection', node)}\u003e\n\n```\n\n#### scrollTo()\n\nScroll to a specified section:\n\n```\n\nhandleClick = (target) =\u003e {\n  const { scrollTo } = this.context\n  if (scrollTo) scrollTo(target)\n}\n\n\u003ca logo onClick={() =\u003e this.handleClick('mysection')}\u003eMy Section\u003c/a\u003e\n\n```\n#### Add Context\n\n#### LEGACY IMPLEMENTATION BEFORE v0.2.1!\n\nDefine your contextTypes:\n\n```\n\nMyComponent.contextTypes = {\n  scrollTo: PropTypes.func.isRequired,\n  addScrollRef: PropTypes.func.isRequired,\n}\n```\nNote: You only need to define the types or functions you want to use. You may only need addScrollRef on your scroll target and e.g. scrollTo within your MenuComponent.\n\n#### IMPLEMENTATION v0.2.1!\n\n```\nimport ScrollToContext from '@zauberware/react-scroll-to'\n\n[...]\n\nMyComponent.contextType = ScrollToContext\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Freact-scroll-to","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzauberware%2Freact-scroll-to","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Freact-scroll-to/lists"}