{"_id":"@eliumhq/react-router-restore-scroll","_rev":"5-9418cca963a14ad30df74f7d4be36973","name":"@eliumhq/react-router-restore-scroll","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.5":{"name":"@eliumhq/react-router-restore-scroll","version":"0.0.5","description":"Scroll positions restoration for React Router","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/ryanflorence/react-router-relative-links.git"},"bugs":{"url":"https://github.com/ryanflorence/react-router-relative-links/issues"},"scripts":{"build":"babel ./modules -d lib --ignore '__tests__'","build-umd":"NODE_ENV=production webpack modules/RestoreScroll.js umd/RestoreScroll.js","build-min":"NODE_ENV=production webpack -p modules/RestoreScroll.js umd/RestoreScroll.min.js","lint":"eslint modules","start":"webpack-dev-server --config example/webpack.config.js --inline --content-base example","test":"npm run lint && karma start"},"authors":["Ryan Florence"],"license":"MIT","peerDependencies":{"create-react-class":"^15.6.0","history":"^2.1.1","react":"*","react-router":"^2.8.0"},"devDependencies":{"babel-cli":"^6.6.5","babel-core":"^6.7.0","babel-eslint":"*","babel-loader":"^6.2.4","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-preset-stage-1":"^6.5.0","eslint":"*","eslint-config-rackt":"*","eslint-plugin-react":"*","expect":"^1.12.0","gzip-size":"^3.0.0","history":"^2.1.1","karma":"^0.13.3","karma-browserstack-launcher":"^0.1.3","karma-chrome-launcher":"^0.2.0","karma-firefox-launcher":"^0.1.6","karma-mocha":"^0.2.0","karma-mocha-reporter":"^1.0.4","karma-sourcemap-loader":"^0.3.5","karma-webpack":"^1.7.0","mocha":"^2.0.1","pretty-bytes":"^2.0.1","prop-types":"^15.5.10","react":"^15.0.1","react-dom":"^15.0.1","react-router":"^2.4.0","rimraf":"^2.4.2","webpack":"^1.12.6","webpack-dev-middleware":"^1.2.0","webpack-dev-server":"^1.14.1"},"tags":["react","react router","scroll","scroll behavior"],"keywords":["react","react router","scroll","scroll behavior"],"gitHead":"5c0fdcc3a4b4054905a1333d71425fecca80accc","homepage":"https://github.com/ryanflorence/react-router-relative-links#readme","_id":"@eliumhq/react-router-restore-scroll@0.0.5","_npmVersion":"5.6.0","_nodeVersion":"9.9.0","_npmUser":{"name":"julienp","email":"j.poissonnier@whatever-company.com"},"dist":{"integrity":"sha512-NORr1SM3SP5jjgP3XvBvGvWOwopB3IP7gcGlHYuXEU7NjJBXSyzSzoaq+ZXCmMyCEEU60n3CjRC/LSvy16yNXg==","shasum":"82eab2a33025dd669e45c429c18e54f228f333cb","tarball":"https://registry.npmjs.org/@eliumhq/react-router-restore-scroll/-/react-router-restore-scroll-0.0.5.tgz","fileCount":21,"unpackedSize":186673,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVE+IEzE+CXGmUWOjlHWMjr85oq0UadVx8wuPI85qu3AiBA8+/vf0oqamzetEaiy8Q6Dm5hlN07r4kgWO/CLCo+Pg=="}]},"maintainers":[{"name":"julienp","email":"j.poissonnier@whatever-company.com"},{"name":"r.slinckx","email":"r.slinckx@whatever-company.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-restore-scroll_0.0.5_1522913516329_0.290779091075533"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-05T07:31:56.328Z","0.0.5":"2018-04-05T07:31:56.462Z","modified":"2022-04-05T07:12:23.628Z"},"maintainers":[],"description":"Scroll positions restoration for React Router","homepage":"https://github.com/ryanflorence/react-router-relative-links#readme","keywords":["react","react router","scroll","scroll behavior"],"repository":{"type":"git","url":"git+https://github.com/ryanflorence/react-router-relative-links.git"},"bugs":{"url":"https://github.com/ryanflorence/react-router-relative-links/issues"},"license":"MIT","readme":"# Restore Scroll\n\nRestore the scroll positions of `window` and scrollable elements when\nthe user navigates around a React Router app.\n\n![demo](http://g.recordit.co/WTEvqRtWq9.gif)\n\n## Temporarily a Plugin\n\nPlan is to put this into React Router directly, but for now you can plug\nit in and help us get the bugs out (and write some tests, there aren't\nany yet!)\n\n## Installation\n\n```sh\nnpm install react-router-restore-scroll\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { Router, browserHistory, applyRouterMiddleware } from 'react-router'\nimport routes from './routes'\n\nimport {\n  useHistoryRestoreScroll,\n  useRouterRestoreScroll\n} from 'react-router-restore-scroll'\n\n// first enhance a history\nconst createHistory = useHistoryRestoreScroll(() => browserHistory)\n\n// next create some router middleware\nconst routerRender = applyRouterMiddleware(\n  useRouterRestoreScroll()\n)\n\n// then plug them into Router\nrender(\n  <Router\n    history={createHistory()}\n    render={routerRender}\n    routes={routes}\n  />,\n  document.getElementById('app')\n)\n```\n\nNow the window's scroll positions will be automatically restored as you\nnavigate around in a React Router app, and even when you navigate out of\nand back into it from external sites.\n\n## Restores Scrollable Elements Too\n\nIf you’ve got scrollable elements (`overflow: auto|scroll`) they can\nalso be restored with the `RestoreScroll` component.\n\n```js\nimport { RestoreScroll } from 'react-router-restore-scroll'\n\n// then in a component's render method, wrap your scrollable element\n// in a `RestoreScroll` component. It needs a `scrollKey`.\n<RestoreScroll scrollKey=\"one\">\n  <div style={{ height: '200px', overflow: 'auto', border: '1px solid' }}>\n    <div style={{ height: '100px', background: 'hsl(0, 50%, 90%)' }}>scroll me</div>\n    <div style={{ height: '100px', background: 'hsl(100, 50%, 90%)' }}>two</div>\n    <div style={{ height: '100px', background: 'hsl(200, 50%, 90%)' }}>three</div>\n  </div>\n</RestoreScroll>\n```\n\n## Non-React usage\n\nThe `useHistoryRestoreScroll` enhancer gives you a history with a\n`restoreScroll` property with three methods that you can use to\nintegrate into any view layer that uses `history` (cycle.js, etc.).\n\n```js\nimport createBrowserHistory from 'history/lib/createBrowserHistory'\nimport useHistoryRestoreScroll from 'react-router-restore-scroll/lib/useHistoryRestoreScroll'\n\nconst history = useHistoryRestoreScroll(createBrowserHistory)()\n\n// call this when a scrollable element is inserted into the dom, where\n// `scrollKey` is a globally unique identifier for the node\nhistory.restoreScroll.registerScroller(scrollKey, domNode)\n\n// call this when it's removed from the dom\nhistory.restoreScroll.unregisterScroller(scrollKey)\n\n// call this\n// - when the app first renders\n// - after the app re-renders after a location change\nhistory.restoreScroll.restoreWindow()\n```\n\nYou can look at `modules/RestoreWindowScroll.js` and `modules/RestoreScroll.js`\nto see at which points in a React app these methods are all called.\n\nWe'll pull `useHistoryRestoreScroll` out into it's own package on npm\neventually so that this use-case isn't required to bring in stuff that\ndepends on React and React Router.\n\n## Difference from [taion/scroll-behavior](https://github.com/taion/scroll-behavior)\n\n- It ties into the router middleware to decide when to restore scroll\n  positions so we don't need workarounds for async routes\n- It restores scroll position of individual elements in addition to the\n  window.\n- It doesn't rely on `location.key` in preparation for history 3.0\n- It does not have `shouldUpdateScroll`, but once [route is on\n  context](https://github.com/reactjs/react-router/issues/3325) we'll be\nable to implement [the old `ignoreScroll` route prop](https://github.com/gaearon/react-router/blob/edfe32086fe9373fe9653b0ef0aaec544eecd3d5/docs/api/components/Route.md#ignorescrollbehavior) or maybe a function like `shouldUpdateScroll` instead.\n\n","readmeFilename":"README.md"}