Use React.createRef() to track child nodes (Remove ReactDOM dependency)

package.json

@@ -50,8 +50,7 @@
     ]
   },
   "peerDependencies": {
-    "react": ">=15.0.0",
-    "react-dom": ">=15.0.0"
+    "react": ">=16.3.0"
   },
   "dependencies": {
     "dom-helpers": "^3.3.1",

src/Transition.js

@@ -1,6 +1,5 @@
 import * as PropTypes from 'prop-types'
 import React from 'react'
-import ReactDOM from 'react-dom'
 import { polyfill } from 'react-lifecycles-compat'
 
 import { timeoutsShape } from './utils/PropTypes'
@@ -144,6 +143,7 @@ class Transition extends React.Component {
     this.state = { status: initialStatus }
 
     this.nextCallback = null
+    this.childRef = React.createRef();
   }
 
   getChildContext() {
@@ -221,8 +221,7 @@ class Transition extends React.Component {
     if (nextStatus !== null) {
       // nextStatus will always be ENTERING or EXITING.
       this.cancelNextCallback()
-      const node = ReactDOM.findDOMNode(this)
-
+      const node = this.childRef.current
       if (nextStatus === ENTERING) {
         this.performEnter(node, mounting)
       } else {
@@ -360,8 +359,14 @@ class Transition extends React.Component {
     delete childProps.onExiting
     delete childProps.onExited
 
+    // Pass the ref to the child element
+    childProps.ref = this.childRef
+
     if (typeof children === 'function') {
-      return children(status, childProps)
+      return React.cloneElement(
+        children(status),
+        childProps
+      )
     }
 
     const child = React.Children.only(children)

webpack.config.js

@@ -16,13 +16,7 @@ module.exports = {
       commonjs2: 'react',
       commonjs: 'react',
       amd: 'react',
-    },
-    'react-dom': {
-      root: 'ReactDOM',
-      commonjs2: 'react-dom',
-      commonjs: 'react-dom',
-      amd: 'react-dom',
-    },
+    }
   },
   module: {
     rules: [