diff --git a/README.md b/README.md index 662624d..bddc158 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,59 @@ +# Updates for this fork + +This is a fork of [ryanflorence/react-router-restore-scroll](https://github.com/ryanflorence/react-router-restore-scroll). + +The above library seems to be unmaintained so I forked it to support React v16 and fix some other minor issues. + +I recommend using node v8.1.2 and the latest npm version in order to use this version, and to use react-router@3. + +## Major differences: +1. Removed deprecated usages of React.createClass and React.PropTypes in order to support React v16. +- Before +```javascript +import React from 'react' + +const RestoreScroll = React.createClass({ +... + propTypes: { + scrollKey: React.PropTypes.string.isRequired + }, +... +)} +``` + +- After +```javascript +import React from 'react' +import PropTypes from 'prop-types' +import createReactClass from 'create-react-class' + +const RestoreScroll = createReactClass({ +... + propTypes: { + scrollKey: PropTypes.string.isRequired + }, +... +)} +``` + +Referring to +- https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass +- https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes + +2. Fixed this repo to directly allow installation with npm. +3. Fixed wrong link in ```package.json``` +4. Fixed not restoring scroll for the first ```POP``` action. +5. Only save scroll position when ```PUSH``` or ```REPLACE``` action. + +## How to use: +Add the following in your ```package.json``` +```javascript +... +"react-router-restore-scroll": "git+https://github.com/jshin49/react-router-restore-scroll.git", +... +``` + + # Restore Scroll Restore the scroll positions of `window` and scrollable elements when diff --git a/modules/RestoreScroll.js b/modules/RestoreScroll.js index 74cdf2a..6e5eebc 100644 --- a/modules/RestoreScroll.js +++ b/modules/RestoreScroll.js @@ -1,14 +1,16 @@ import React from 'react' +import PropTypes from 'prop-types' +import createReactClass from 'create-react-class' import { findDOMNode } from 'react-dom' -const RestoreScroll = React.createClass({ +const RestoreScroll = createReactClass({ contextTypes: { - router: React.PropTypes.object.isRequired + router: PropTypes.object.isRequired }, propTypes: { - scrollKey: React.PropTypes.string.isRequired + scrollKey: PropTypes.string.isRequired }, componentDidMount() { @@ -28,4 +30,3 @@ const RestoreScroll = React.createClass({ }) export default RestoreScroll - diff --git a/modules/RestoreWindowScroll.js b/modules/RestoreWindowScroll.js index c9b9900..0655af9 100644 --- a/modules/RestoreWindowScroll.js +++ b/modules/RestoreWindowScroll.js @@ -1,10 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types'; +import createReactClass from 'create-react-class' -const RestoreWindowScroll = React.createClass({ +const RestoreWindowScroll = createReactClass({ propTypes: { - restoreWindow: React.PropTypes.func.isRequired, - location: React.PropTypes.object.isRequired + restoreWindow: PropTypes.func.isRequired, + location: PropTypes.object.isRequired }, componentDidMount() { @@ -23,4 +25,3 @@ const RestoreWindowScroll = React.createClass({ }) export default RestoreWindowScroll - diff --git a/modules/useHistoryRestoreScroll.js b/modules/useHistoryRestoreScroll.js index 1a29f58..beea6c5 100644 --- a/modules/useHistoryRestoreScroll.js +++ b/modules/useHistoryRestoreScroll.js @@ -34,7 +34,6 @@ const useHistoryRestoreScroll = (createHistory) => ( const initialScrollKey = sessionStorage.initialScrollKey || createKey() let currentScrollKey = sessionStorage.currentScrollKey || initialScrollKey - let first = true window.addEventListener('beforeunload', () => { saveScrollPositions() @@ -108,9 +107,7 @@ const useHistoryRestoreScroll = (createHistory) => ( } const unlisten = history.listen((location) => { - if (first) { - first = false - } else { + if (location.action === 'PUSH' || location.action === 'REPLACE') { saveScrollPositions() } currentScrollKey = ( @@ -138,4 +135,3 @@ const useHistoryRestoreScroll = (createHistory) => ( ) export default useHistoryRestoreScroll - diff --git a/package.json b/package.json index a04cd0f..5a6cf4b 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,31 @@ { "name": "react-router-restore-scroll", "version": "0.0.1", - "description": "Scroll positions restoration for React Router", + "description": "Scroll position restoration for React Router", "main": "lib/index.js", "repository": { "type": "git", - "url": "https://github.com/ryanflorence/react-router-relative-links.git" + "url": "https://github.com/jshin49/react-router-restore-scroll.git" }, - "bugs": "https://github.com/ryanflorence/react-router-relative-links/issues", + "bugs": "https://github.com/jshin49/react-router-restore-scroll/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", + "postinstall": "node npm-scripts/postinstall.js", "start": "webpack-dev-server --config example/webpack.config.js --inline --content-base example", "test": "npm run lint && karma start" }, "authors": [ - "Ryan Florence" + "Ryan Florence", + "Jay Shin" ], "license": "MIT", "peerDependencies": { "react": "*", - "react-router": "^2.4.0", - "history": "^2.1.1" + "react-router": "^3.0.0", + "create-react-class": "^15.6.0" }, "devDependencies": { "babel-cli": "^6.6.5", @@ -33,12 +35,12 @@ "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-1": "^6.5.0", + "create-react-class": "^15.6.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", @@ -49,9 +51,10 @@ "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", + "react-router": "^3.0.0", "rimraf": "^2.4.2", "webpack": "^1.12.6", "webpack-dev-middleware": "^1.2.0", @@ -61,12 +64,16 @@ "react", "react router", "scroll", - "scroll behavior" + "scroll behavior", + "restore scroll" ], "keywords": [ "react", "react router", "scroll", - "scroll behavior" - ] + "scroll behavior", + "restore scroll" + ], + "dependencies": { + } }