Fix refs for React 16, update deps

Author: GeKorm

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-css-transition-replace",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "A React component to animate replacing one element with another.",
   "main": "lib/ReactCSSTransitionReplace.js",
   "repository": {
@@ -14,15 +14,15 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
-    "prop-types": "^15.5.6",
-    "react-transition-group": "^1.1.1"
+    "prop-types": "^15.6.0",
+    "react-transition-group": "^1.2.1"
   },
   "peerDependencies": {
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^6.1.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-check-es2015-constants": "^6.8.0",
@@ -31,15 +31,15 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
     "babel-plugin-transform-es2015-block-scoped-functions": "^6.8.0",
-    "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
+    "babel-plugin-transform-es2015-block-scoping": "^6.26.0",
     "babel-plugin-transform-es2015-classes": "^6.24.1",
     "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
     "babel-plugin-transform-es2015-destructuring": "^6.16.0",
     "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1",
     "babel-plugin-transform-es2015-for-of": "^6.8.0",
     "babel-plugin-transform-es2015-function-name": "^6.24.1",
     "babel-plugin-transform-es2015-literals": "^6.8.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-plugin-transform-es2015-object-super": "^6.24.1",
     "babel-plugin-transform-es2015-parameters": "^6.24.1",
     "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
@@ -48,16 +48,16 @@
     "babel-plugin-transform-es2015-template-literals": "^6.8.0",
     "babel-plugin-transform-es2015-typeof-symbol": "^6.8.0",
     "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-object-set-prototype-of-to-assign": "^6.8.0",
-    "babel-plugin-transform-proto-to-assign": "^6.9.0",
+    "babel-plugin-transform-proto-to-assign": "^6.26.0",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
-    "babel-plugin-transform-react-display-name": "^6.8.0",
+    "babel-plugin-transform-react-display-name": "^6.25.0",
     "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.9",
-    "babel-polyfill": "^6.16.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.9",
+    "babel-polyfill": "^6.26.0",
     "babelify": "^7.3.0",
     "browser-sync": "^2.17.2",
     "browserify": "^13.1.0",
@@ -69,10 +69,10 @@
     "gulp-flatten": "^0.2.0",
     "gulp-notify": "^2.2.0",
     "lodash.assign": "^4.2.0",
-    "react": "^15.3.2",
-    "react-bootstrap": "^0.31.0",
-    "react-dom": "^15.3.2",
-    "rimraf": "^2.5.4",
+    "react": "^16.0.0",
+    "react-bootstrap": "^0.31.3",
+    "react-dom": "^16.0.0",
+    "rimraf": "^2.6.2",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.7.0"

src/ReactCSSTransitionReplace.jsx

@@ -125,7 +125,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
     // transitioned into existence. When another child is set for this component at the point
     // where only refs.next exists, we want to use the width/height of refs.next instead of
     // refs.curr.
-    const ref = this.refs.curr || this.refs.next
+    const ref = this.curr || this.next
 
     // Set the next child to start the transition, and set the current height.
     this.setState({
@@ -163,7 +163,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
         })
       }
 
-      const nextNode = ReactDOM.findDOMNode(this.refs.next)
+      const nextNode = ReactDOM.findDOMNode(this.next)
       if (nextNode) {
         this.setState({
           activeHeightTransition: true,
@@ -182,7 +182,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
   }
 
   appearCurrent() {
-    this.refs.curr.componentWillAppear(this._handleDoneAppearing)
+    this.curr.componentWillAppear(this._handleDoneAppearing)
     this.isTransitioning = true
   }
 
@@ -191,7 +191,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
   }
 
   enterNext() {
-    this.refs.next.componentWillEnter(this._handleDoneEntering)
+    this.next.componentWillEnter(this._handleDoneEntering)
     this.isTransitioning = true
   }
 
@@ -211,7 +211,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
   }
 
   leaveCurrent() {
-    this.refs.curr.componentWillLeave(this._handleDoneLeaving)
+    this.curr.componentWillLeave(this._handleDoneLeaving)
     this.isTransitioning = true
     this.setState({isLeaving: true})
   }
@@ -267,6 +267,14 @@ export default class ReactCSSTransitionReplace extends React.Component {
     }, child)
   }
 
+  setCurrRef = (ref) => {
+    this.curr = ref
+  }
+
+  setNextRef = (ref) => {
+    this.next = ref
+  }
+
   render() {
     const {currentChild, currentChildKey, nextChild, nextChildKey, height, width, isLeaving, activeHeightTransition} = this.state
     const childrenToRender = []
@@ -285,7 +293,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
           {key: currentChildKey},
           this._wrapChild(
             typeof currentChild.type == 'string' ? currentChild : React.cloneElement(currentChild, {isLeaving}),
-            {ref: 'curr'})
+            {ref: this.setCurrRef})
         )
       )
     }
@@ -333,7 +341,7 @@ export default class ReactCSSTransitionReplace extends React.Component {
             },
             key: nextChildKey,
           },
-          this._wrapChild(nextChild, {ref: 'next'})
+          this._wrapChild(nextChild, {ref: this.setNextRef})
         )
       )
     }