{"id":27553022,"url":"https://github.com/some-react-components/react-scrollchor","last_synced_at":"2025-04-19T11:43:08.750Z","repository":{"id":8588810,"uuid":"58925053","full_name":"some-react-components/react-scrollchor","owner":"some-react-components","description":"A React component for scroll to `#hash` links with smooth animations","archived":false,"fork":false,"pushed_at":"2023-03-14T15:25:52.000Z","size":27780,"stargazers_count":149,"open_issues_count":6,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-15T02:06:11.649Z","etag":null,"topics":["anchor","animate","hash","scroll","scrollchor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/some-react-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-05-16T10:44:57.000Z","updated_at":"2024-10-10T16:36:40.000Z","dependencies_parsed_at":"2024-06-18T13:47:56.040Z","dependency_job_id":"9c1c3999-a36c-4a25-b3d6-e02f61f1b8cf","html_url":"https://github.com/some-react-components/react-scrollchor","commit_stats":{"total_commits":87,"total_committers":7,"mean_commits":"12.428571428571429","dds":0.2068965517241379,"last_synced_commit":"3f53773a9eb4d094ce83e96ea6044703106c1af2"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/some-react-components%2Freact-scrollchor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/some-react-components%2Freact-scrollchor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/some-react-components%2Freact-scrollchor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/some-react-components%2Freact-scrollchor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/some-react-components","download_url":"https://codeload.github.com/some-react-components/react-scrollchor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249558185,"owners_count":21291175,"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":["anchor","animate","hash","scroll","scrollchor"],"created_at":"2025-04-19T11:43:08.134Z","updated_at":"2025-04-19T11:43:08.743Z","avatar_url":"https://github.com/some-react-components.png","language":"TypeScript","funding_links":["https://paypal.me/bySabi/10"],"categories":[],"sub_categories":[],"readme":"# react-scrollchor (React Scrollchor)\n\n[![npm version](https://badge.fury.io/js/react-scrollchor.svg)](https://badge.fury.io/js/react-scrollchor)\n[![npm downloads](https://img.shields.io/npm/dm/react-scrollchor.svg?style=flat-square)](https://www.npmjs.com/package/react-scrollchor)\n[![Donate](https://img.shields.io/badge/$-support-green.svg?style=flat-square)](https://paypal.me/bySabi/10)\n\n\u003e A React component for scrolling to `#hash` links with smooth animations.\n\u003e Scrollchor is a mix of `Scroll` and `Anchor`, a joke name for a useful component.\n\nSee it in action:\n* demo [video](https://github.com/some-react-components/react-scrollchor/blob/example/demo/scrollchor.webm?raw=true)\n\n`hash` is the `id` attribute of an HTML tag on the current page.\n\n## Installation\n\n### npm\n\n```bash\nnpm install react-scrollchor --save\n```\n\n### yarn\n\n```bash\nyarn add react-scrollchor\n```\n\n### Dependencies\n\nYou must have React (≥16.8.0) installed in your project before trying to use this component. This minimum version constraint represents the React version which [introduced hooks](https://reactjs.org/docs/hooks-intro.html).\n\n\n## Usage\n\n```js\nimport { Scrollchor } from 'react-scrollchor';\nimport { Navbar, NavItem, Page, Section } from './components';\n\nconst LandingPage = (props) =\u003e (\n  \u003cPage\u003e\n\n    \u003cNavbar brand={brand} className=\"navbar-fixed-top\"\u003e\n      \u003cNavItem\u003e\u003cScrollchor to=\"\" className=\"nav-link\"\u003eHome\u003c/Scrollchor\u003e\u003c/NavItem\u003e\n      \u003cNavItem\u003e\u003cScrollchor to=\"#sample-code\" className=\"nav-link\"\u003eSample\u003c/Scrollchor\u003e\u003c/NavItem\u003e\n      \u003cNavItem\u003e\u003cScrollchor to=\"#features\" className=\"nav-link\"\u003eFeatures\u003c/Scrollchor\u003e\u003c/NavItem\u003e\n      \u003cNavItem\u003e\u003cScrollchor to=\"footer\" className=\"nav-link\"\u003eSignUp\u003c/Scrollchor\u003e\u003c/NavItem\u003e\n    \u003c/Navbar\u003e\n\n\n    \u003cSection id=\"sample-code\"\u003e\n      \u003cdiv style={{ height: '100vh' }} /\u003e\n    \u003c/Section\u003e\n\n    \u003cdiv id=\"features\"\u003e\n      \u003cdiv style={{ height: '100vh' }} /\u003e\n    \u003c/div\u003e\n\n    \u003cfooter id=\"footer\"\u003e\n      \u003cdiv style={{ height: '100vh' }} /\u003e\n    \u003c/footer\u003e\n\n  \u003c/Page\u003e\n);\n\nexport default LandingPage;\n```\n\n## Props\n\nThe package ships with TypeScript type definitions to help with IDE autocompletion, but the sections below should give you a quick rundown of each prop if you prefer this format. Any props not listed below are passed directly on to the underlying `\u003ca\u003e` tag, except for `href` and `onClick`.\n\nThe `to` prop controls the final `href` prop, and `onClick` is used internally to perform the scrolling. If you need to run some code when the link is clicked use the `beforeAnimate` prop instead.\n\n### `to: string`\n\nThe anchor (id) to which this link should scroll to. Any leading `#` will be stripped from this value.\n\n### `target?: string`\n\nThe element scrolling will be performed on when clicked. Leading `#` will be stripped here as well.\n\nScrollchor works within any scrollable parent container. If no target is provided (or the target element is not found on the page), the default is scrolling both the `\u003chtml\u003e` and `\u003cbody\u003e` elements simultaneously.\n\n### `animate?: Partial\u003cAnimateConfig\u003e`\n\nThe smooth scrolling animation can be customized using this prop. Three pre-defined easing functions are exported by the package: `easeOutQuad`, `swing`, `linear`. When not provided, the default looks like this:\n\n```ts\nimport { AnimateConfig, easeOutQuad } from 'react-scrollchor';\n\nconst defaultAnimate: AnimateConfig = {\n  offset: 0,\n  duration: 400,\n  easing: easeOutQuad,\n};\n```\n\n * `offset?: number` \u0026mdash; Additional pixels to scroll relative to the target element (supports negative values, e.g. for fixed position headers)\n * `duration?: number` \u0026mdash; Length of the animation in milliseconds\n * `easing?: ScrollchorEasingFunction` \u0026mdash; Easing function to calculate the animation steps. Pass a function that matches the exported interface for a custom easing.\n\n    | # | Parameter | Meaning |\n    |---|-----------|---------|\n    |0|percent|Percent completed of the animation (decimal, `0.0` to `1.0`)|\n    |1|elapsedTime|Time elapsed since the animation began, in ms|\n    |2|startValue|Static value set to `0`|\n    |3|valueChange|Static value set to `1`|\n    |4|duration|Duration of the animation, in ms|\n\n    Returns a decimal indicating how close the animation is to the end value (`0` = start, `1` = finished, `1.2` = 20% over the end value, think \"bounce\" effects)\n\nThe default values can be customized all at once or individually by providing only the properties you want to override. For example:\n\n```jsx\nimport { Scrollchor, linear } from 'react-scrollchor';\n\nconst HomeLink = () =\u003e (\n  \u003cScrollchor to=\"home\" animate={{ duration: 1000, easing: linear }}\u003e\n    Home\n  \u003c/Scrollchor\u003e\n);\n```\n\nYou can find additional easing functions at these links:\n\n* [Robert Penner's Easing Functions](http://robertpenner.com/easing/)\n* [Javascript source code](https://github.com/danro/jquery-easing/blob/master/jquery.easing.js)\n\n\n### `beforeAnimate: MouseEventHandler` / `afterAnimate: MouseEventHandler`\n\nYou can use these callbacks to trigger behaviors like: update state, load async stuff, etc. when either stage happens. The functions receive the originating `MouseEvent` as their only argument, the return value is not used.\n\n`beforeAnimate` is triggered before the animation starts, i.e. immediately when the link is clicked, while `afterAnimate` is called once the animation has finished.\n\n```js\n\u003cScrollchor to=\"#aboutus\" afterAnimate={() =\u003e setActive('home')}\u003eHome\u003c/Scrollchor\u003e\n```\n\n## Credits\n\n### author\n* bySabi Files \u003c\u003e [@bySabi](https://github.com/bySabi)\n\n### maintainers\n* xehpuk \u003c\u003e [@xehpuk](https://github.com/xehpuk)\n* SeinopSys \u003c\u003e [@SeinopSys](https://github.com/SeinopSys)\n\n### contributors\n* Jean Chung \u003c\u003e [@jeanchung](https://github.com/jeanchung)\n* Chua Kang Ming \u003c\u003e [@kambing86](https://github.com/kambing86)\n* Benjamin MICHEL \u003c\u003e [@SBRK](https://github.com/SBRK)\n\n## Contributing\n\n* Documentation improvement\n* Feel free to send any PR\n\n## License\n\n[ISC][isc-license]\n\n[isc-license]:./LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsome-react-components%2Freact-scrollchor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsome-react-components%2Freact-scrollchor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsome-react-components%2Freact-scrollchor/lists"}