{"id":21185576,"url":"https://github.com/tomassestak/react-spring-scroll-to-hook","last_synced_at":"2025-07-31T15:43:43.709Z","repository":{"id":51135612,"uuid":"343434972","full_name":"TomasSestak/react-spring-scroll-to-hook","owner":"TomasSestak","description":"Simple custom hook for scrollTo functionality in react-spring v9","archived":false,"fork":false,"pushed_at":"2021-05-21T23:06:30.000Z","size":782,"stargazers_count":14,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-11T20:02:51.767Z","etag":null,"topics":["custom-hook","hook","react-hook","react-spring","scrollto-functionality"],"latest_commit_sha":null,"homepage":"https://TomasSestak.github.io/react-spring-scroll-to-hook/","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/TomasSestak.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}},"created_at":"2021-03-01T13:58:01.000Z","updated_at":"2024-04-23T06:58:11.000Z","dependencies_parsed_at":"2022-08-27T18:33:22.282Z","dependency_job_id":null,"html_url":"https://github.com/TomasSestak/react-spring-scroll-to-hook","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/TomasSestak/react-spring-scroll-to-hook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasSestak%2Freact-spring-scroll-to-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasSestak%2Freact-spring-scroll-to-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasSestak%2Freact-spring-scroll-to-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasSestak%2Freact-spring-scroll-to-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomasSestak","download_url":"https://codeload.github.com/TomasSestak/react-spring-scroll-to-hook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasSestak%2Freact-spring-scroll-to-hook/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259957155,"owners_count":22937538,"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":["custom-hook","hook","react-hook","react-spring","scrollto-functionality"],"created_at":"2024-11-20T18:17:11.417Z","updated_at":"2025-06-15T10:06:06.073Z","avatar_url":"https://github.com/TomasSestak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-spring-scroll-to-hook\n\n\u003e Simple custom hook for ScrollTo functionality using react-spring v9+.\n\n[![NPM](https://img.shields.io/npm/v/react-spring-scroll-to-hook.svg)](https://www.npmjs.com/package/react-spring-scroll-to-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install react-spring-scroll-to-hook\n```\n\n```bash\nyarn add react-spring-scroll-to-hook\n```\n\n## Usage\n\nuseScrollTo hook accepts 1 argument a that is react-spring config: https://react-spring.io/common/configs\nscrollTo function returned from useScrollTo hook accepts 2 arguments:\n\n    1: Element | string | number (number of pixels from top of the window)\n    2: Number (offset in pixels from element you want to scroll to)\n\nI don't know how three shaking works but I would recommend using \u003cb\u003e@react-spring/web (used in this hook)\u003c/b\u003e instead of react-spring\n\n## Examples\n\n```tsx\n\nimport {config} from '@react-spring/web'\nimport useScrollTo from 'react-spring-scroll-to-hook'\n\n//Scroll to element\nconst BasicExampleWthConfig = () =\u003e {\n    const {scrollTo} = useScrollTo(config.molasses)\n    return (\n        \u003cbutton type=\"button\" onClick={() =\u003e scrollTo(document.querySelector('#id'))}\u003e\n            Scroll to Element with predefined config from react-spring\n        \u003c/button\u003e\n    )\n}\n\n//Scroll to top\nconst ScrollToTop = () =\u003e {\n    const {scrollTo} = useScrollTo({ mass: 1, tension: 180, friction: 12 })\n    return (\n        \u003cbutton type=\"button\" onClick={scrollTo}\u003e\n            Scroll to the top of the page with your config\n        \u003c/button\u003e\n    )\n}\n\n//Scroll to top with offset and first argument as string only (document.querySelector is used in the hook)\nconst ScrollToTopWithOffset = () =\u003e {\n    const {scrollTo} = useScrollTo()\n    return (\n        \u003cbutton type=\"button\" onClick={() =\u003e scrollTo('#id', 300)}\u003e\n            Scroll to the top of the page with default config and offset from element\n        \u003c/button\u003e\n    )\n}\n\n```\n\n## License\n\nMIT © [TomasSestak](https://github.com/TomasSestak)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomassestak%2Freact-spring-scroll-to-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomassestak%2Freact-spring-scroll-to-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomassestak%2Freact-spring-scroll-to-hook/lists"}