{"id":13422427,"url":"https://github.com/taion/react-router-scroll","last_synced_at":"2025-05-15T10:01:41.530Z","repository":{"id":8266982,"uuid":"57455583","full_name":"taion/react-router-scroll","owner":"taion","description":"React Router scroll management","archived":false,"fork":false,"pushed_at":"2022-12-06T17:44:38.000Z","size":1268,"stargazers_count":836,"open_issues_count":14,"forks_count":60,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-13T16:13:34.592Z","etag":null,"topics":[],"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/taion.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":"2016-04-30T18:11:51.000Z","updated_at":"2024-11-06T10:30:07.000Z","dependencies_parsed_at":"2023-01-13T15:00:51.373Z","dependency_job_id":null,"html_url":"https://github.com/taion/react-router-scroll","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taion%2Freact-router-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taion%2Freact-router-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taion%2Freact-router-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taion%2Freact-router-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taion","download_url":"https://codeload.github.com/taion/react-router-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319715,"owners_count":22051072,"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":[],"created_at":"2024-07-30T23:00:44.553Z","updated_at":"2025-05-15T10:01:41.017Z","avatar_url":"https://github.com/taion.png","language":"JavaScript","funding_links":[],"categories":["Code Design","Uncategorized","JavaScript"],"sub_categories":["Router","Uncategorized"],"readme":"# react-router-scroll [![Travis][build-badge]][build] [![npm][npm-badge]][npm]\n\n[React Router](https://github.com/reactjs/react-router) scroll management.\n\nreact-router-scroll is a React Router middleware that adds scroll management using [scroll-behavior](https://github.com/taion/scroll-behavior). By default, the middleware adds browser-style scroll behavior, but you can customize it to scroll however you want on route transitions.\n\n**This library does not currently support React Router v4, because React Router v4 has no concept of router middlewares. See ongoing discussion in [#52](https://github.com/taion/react-router-scroll/issues/52). For an interim solution for just scrolling to top on navigation, see the React Router [documentation on scroll restoration](https://reacttraining.com/react-router/web/guides/scroll-restoration).**\n\n## Usage\n\n```js\nimport { applyRouterMiddleware, browserHistory, Router } from 'react-router';\nimport { useScroll } from 'react-router-scroll';\n\n/* ... */\n\nReactDOM.render(\n  \u003cRouter\n    history={browserHistory}\n    routes={routes}\n    render={applyRouterMiddleware(useScroll())}\n  /\u003e,\n  container\n);\n```\n\n## Guide\n\n### Installation\n\n```shell\n$ npm i -S react react-dom react-router\n$ npm i -S react-router-scroll\n```\n\n### Basic usage\n\nApply the `useScroll` router middleware using `applyRouterMiddleware`, as in the example above.\n\n### Custom scroll behavior\n\nYou can provide a custom `shouldUpdateScroll` callback as an argument to `useScroll`. This callback is called with the previous and the current router props.\n\nThe callback can return:\n\n- a falsy value to suppress updating the scroll position\n- a position array of `x` and `y`, such as `[0, 100]`, to scroll to that position\n- a string with the `id` or `name` of an element, to scroll to that element\n- a truthy value to emulate the browser default scroll behavior\n\n```js\nuseScroll((prevRouterProps, { location }) =\u003e (\n  !prevRouterProps || location.pathname !== prevRouterProps.location.pathname\n));\n\nuseScroll((prevRouterProps, { routes }) =\u003e {\n  if (routes.some(route =\u003e route.ignoreScrollBehavior)) {\n    return false;\n  }\n\n  if (routes.some(route =\u003e route.scrollToTop)) {\n    return [0, 0];\n  }\n\n  return true;\n});\n```\n\nYou can customize `useScroll` even further by providing a configuration object with a `createScrollBehavior` callback that creates the scroll behavior object. This allows using a custom subclass of `ScrollBehavior` from scroll-behavior with custom logic. When using a configuration object, you can specify the `shouldUpdateScroll` callback as above under the `shouldUpdateScroll` key.\n\n```js\nuseScroll({\n  createScrollBehavior: (config) =\u003e new MyScrollBehavior(config),\n  shouldUpdateScroll,\n});\n```\n\n### Scrolling elements other than `window`\n\nUse `\u003cScrollContainer\u003e` in components rendered by a router with the `useScroll` middleware to manage the scroll behavior of elements other than `window`. Each `\u003cScrollContainer\u003e` must be given a unique `scrollKey`, and can be given an optional `shouldUpdateScroll` callback that behaves as above.\n\n```js\nimport { ScrollContainer } from 'react-router-scroll';\n\nfunction Page() {\n  /* ... */\n\n  return (\n    \u003cScrollContainer\n      scrollKey={scrollKey}\n      shouldUpdateScroll={shouldUpdateScroll}\n    \u003e\n      \u003cMyScrollableComponent /\u003e\n    \u003c/ScrollContainer\u003e\n  );\n}\n```\n\n`\u003cScrollContainer\u003e` does not support on-the-fly changes to `scrollKey` or to the DOM node for its child.\n\n### Notes\n\n#### Minimizing bundle size\n\nIf you are not using `\u003cScrollContainer\u003e`, you can reduce your bundle size by importing the `useScroll` module directly.\n\n```js\nimport useScroll from 'react-router-scroll/lib/useScroll';\n```\n\n#### Server rendering\n\nDo not apply the `useScroll` middleware when rendering on a server. You may use `\u003cScrollContainer\u003e` in server-rendered components; it will do nothing when rendering on a server.\n\n[build-badge]: https://img.shields.io/travis/taion/react-router-scroll/master.svg\n[build]: https://travis-ci.org/taion/react-router-scroll\n\n[npm-badge]: https://img.shields.io/npm/v/react-router-scroll.svg\n[npm]: https://www.npmjs.org/package/react-router-scroll\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaion%2Freact-router-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaion%2Freact-router-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaion%2Freact-router-scroll/lists"}