add React 16.3.x support

Author: bySabi

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## master (unreleased)
 
+## 4.3.0
+
+- Add support for React 16.3.x new API
+- Prevent warnning on React 16.3.x deprecated `componentWillReceiveProps`
+
 ## 4.2.1
 
 - Prevent error when clicking a link to an anchor that does not exist. Thanks to @SBRK contribution

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scrollchor",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "A React component for scroll to #hash links with smooth animations",
   "files": [
     "lib"
@@ -47,8 +47,8 @@
     "babel-preset-stage-3": "6.x.x",
     "fbjs": "*",
     "mkdirp": "*",
-    "prop-types": "^15.5.8",
-    "react": "^15.5.4",
+    "prop-types": "15.x.x",
+    "react": "16.x.x",
     "rimraf": "2.x.x",
     "semistandard": "*",
     "snazzy": "7.x.x"

src/scrollchor.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { animateScroll, updateHistory } from './utils';
+import { animateScroll, updateHistory } from './helpers';
 
 export default class Scrollchor extends React.Component {
   constructor (props) {
     super(props);
-    this._setup(props);
+    this.state = Scrollchor._stateHelper(props);
     this.simulateClick = this._handleClick;
+    isReact16_3() && delete Scrollchor.prototype.componentWillReceiveProps;
   }
 
   static propTypes = {
@@ -21,34 +22,39 @@ export default class Scrollchor extends React.Component {
     disableHistory: PropTypes.bool
   }
 
-  _setup = props => {
-    this._to = (props.to && props.to.replace(/^#/, '')) || '';
+  static _stateHelper (props) {
     const {
       // default animate object
       offset = 0,
       duration = 400,
       easing = easeOutQuad
-    } =
-      props.animate || {};
-    this._animate = { offset, duration, easing };
-    this._beforeAnimate = props.beforeAnimate || function () {};
-    this._afterAnimate = props.afterAnimate || function () {};
-    this._disableHistory = props.disableHistory;
+    } = props.animate || {};
+    return {
+      to: (props.to && props.to.replace(/^#/, '')) || '',
+      animate: { offset, duration, easing },
+      beforeAnimate: props.beforeAnimate || function () {},
+      afterAnimate: props.afterAnimate || function () {},
+      disableHistory: props.disableHistory
+    };
   }
 
-  _handleClick = event => {
-    this._beforeAnimate(event);
+  _handleClick = (event) => {
+    this.state.beforeAnimate(event);
     event && event.preventDefault();
-    const id = animateScroll(this._to, this._animate);
+    const id = animateScroll(this.state.to, this.state.animate);
 
     if (id) {
-      this._disableHistory || updateHistory(id);
-      this._afterAnimate(event);
+      this.state.disableHistory || updateHistory(id);
+      this.state.afterAnimate(event);
     }
   }
 
+  static getDerivedStateFromProps (props) {
+    return Scrollchor._stateHelper(props);
+  }
+
   componentWillReceiveProps (props) {
-    this._setup(props);
+    this.setState(Scrollchor._stateHelper(props));
   }
 
   render () {
@@ -65,3 +71,10 @@ export default class Scrollchor extends React.Component {
 function easeOutQuad (x, t, b, c, d) {
   return -c * (t /= d) * (t - 2) + b;
 }
+
+// Check for React version 16.3.x and beyond
+function isReact16_3 () { // eslint-disable-line camelcase
+  const reSemver = /^v?((\d+)\.(\d+)\.(\d+))(?:-([\dA-Za-z\-]+(?:\.[\dA-Za-z\-]+)*))?(?:\+([\dA-Za-z\-]+(?:\.[\dA-Za-z\-]+)*))?$/; // eslint-disable-line no-useless-escape
+  const [,, major, minor] = reSemver.exec(React.version);
+  return major >= 16 && minor >= 3;
+}