breaking: Use stable context API

Author: eps1lon

package.json

@@ -50,8 +50,8 @@
     ]
   },
   "peerDependencies": {
-    "react": ">=15.0.0",
-    "react-dom": ">=15.0.0"
+    "react": ">=16.6.0",
+    "react-dom": ">=16.6.0"
   },
   "dependencies": {
     "dom-helpers": "^3.3.1",
@@ -87,8 +87,8 @@
     "husky": "^1.0.0-rc.15",
     "jest": "^23.6.0",
     "prettier": "^1.14.3",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "~16.6.3",
+    "react-dom": "~16.6.3",
     "react-test-renderer": "^16.5.2",
     "release-script": "^1.0.2",
     "rimraf": "^2.6.1",

src/Transition.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { polyfill } from 'react-lifecycles-compat'
 
 import { timeoutsShape } from './utils/PropTypes'
+import TransitionGroupContext from './TransitionGroupContext'
 
 export const UNMOUNTED = 'unmounted'
 export const EXITED = 'exited'
@@ -107,17 +108,12 @@ export const EXITING = 'exiting'
  * > `CSSTransition`.
  */
 class Transition extends React.Component {
-  static contextTypes = {
-    transitionGroup: PropTypes.object,
-  }
-  static childContextTypes = {
-    transitionGroup: () => {},
-  }
+  static contextType = TransitionGroupContext
 
   constructor(props, context) {
     super(props, context)
 
-    let parentGroup = context.transitionGroup
+    let parentGroup = context
     // In the context of a TransitionGroup all enters are really appears
     let appear =
       parentGroup && !parentGroup.isMounting ? props.enter : props.appear
@@ -146,10 +142,6 @@ class Transition extends React.Component {
     this.nextCallback = null
   }
 
-  getChildContext() {
-    return { transitionGroup: null } // allows for nested Transitions
-  }
-
   static getDerivedStateFromProps({ in: nextIn }, prevState) {
     if (nextIn && prevState.status === UNMOUNTED) {
       return { status: EXITED }
@@ -236,8 +228,8 @@ class Transition extends React.Component {
 
   performEnter(node, mounting) {
     const { enter } = this.props
-    const appearing = this.context.transitionGroup
-      ? this.context.transitionGroup.isMounting
+    const appearing = this.context
+      ? this.context.isMounting
       : mounting
 
     const timeouts = this.getTimeouts()
@@ -364,11 +356,21 @@ class Transition extends React.Component {
     delete childProps.onExited
 
     if (typeof children === 'function') {
-      return children(status, childProps)
+      // allows for nested Transitions
+      return (
+        <TransitionGroupContext.Provider value={null}>
+          {children(status, childProps)}
+        </TransitionGroupContext.Provider>
+      )
     }
 
     const child = React.Children.only(children)
-    return React.cloneElement(child, childProps)
+    return (
+      // allows for nested Transitions
+      <TransitionGroupContext.Provider value={null}>
+        {React.cloneElement(child, childProps)}
+      </TransitionGroupContext.Provider>
+    )
   }
 }
 

src/TransitionGroup.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { polyfill } from 'react-lifecycles-compat'
+import TransitionGroupContext from './TransitionGroupContext'
 
 
 import {
@@ -31,31 +32,24 @@ const defaultProps = {
  * items.
  */
 class TransitionGroup extends React.Component {
-  static childContextTypes = {
-    transitionGroup: PropTypes.object.isRequired,
-  }
-
   constructor(props, context) {
     super(props, context)
 
     const handleExited = this.handleExited.bind(this)
 
     // Initial children should all be entering, dependent on appear
     this.state = {
+      contextValue: { isMounting: true },
       handleExited,
       firstRender: true,
     }
   }
 
-  getChildContext() {
-    return {
-      transitionGroup: { isMounting: !this.appeared },
-    }
-  }
-
   componentDidMount() {
-    this.appeared = true
     this.mounted = true
+    this.setState({
+      contextValue: { isMounting: false },
+    })
   }
 
   componentWillUnmount() {
@@ -95,16 +89,25 @@ class TransitionGroup extends React.Component {
 
   render() {
     const { component: Component, childFactory, ...props } = this.props
+    const { contextValue } = this.state
     const children = values(this.state.children).map(childFactory)
 
     delete props.appear
     delete props.enter
     delete props.exit
 
     if (Component === null) {
-      return children
+      return (
+        <TransitionGroupContext.Provider value={contextValue}>
+          {children}
+        </TransitionGroupContext.Provider>
+      )
     }
-    return <Component {...props}>{children}</Component>
+    return (
+      <TransitionGroupContext.Provider value={contextValue}>
+        <Component {...props}>{children}</Component>
+      </TransitionGroupContext.Provider>
+    )
   }
 }
 

src/TransitionGroupContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext(null);

yarn.lock

@@ -9413,15 +9413,6 @@ react-docgen@^3.0.0-rc.1:
     node-dir "^0.1.10"
     recast "^0.16.0"
 
-react-dom@^16.5.2:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    schedule "^0.5.0"
-
 react-dom@^16.6.3:
   version "16.7.0"
   resolved "http://storage.mds.yandex.net/get-npm/38095/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
@@ -9432,6 +9423,16 @@ react-dom@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react-dom@~16.6.0:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
+
 react-error-overlay@^5.1.0:
   version "5.1.1"
   resolved "http://storage.mds.yandex.net/get-npm/69187/react-error-overlay-5.1.1.tgz#56f0439f001ff3588da0f479a86482ccb1e708cb"
@@ -9541,15 +9542,6 @@ react-treebeard@^3.1.0:
     shallowequal "^1.1.0"
     velocity-react "^1.4.1"
 
-react@^16.5.2:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    schedule "^0.5.0"
-
 react@^16.6.3:
   version "16.7.0"
   resolved "http://storage.mds.yandex.net/get-npm/45674/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
@@ -9560,6 +9552,16 @@ react@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react@~16.6.0:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
+
 read-cmd-shim@^1.0.1, read-cmd-shim@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz#2d5d157786a37c055d22077c32c53f8329e91c7b"
@@ -10251,6 +10253,14 @@ schedule@^0.5.0:
   dependencies:
     object-assign "^4.1.1"
 
+scheduler@^0.11.2:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"
+  integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.12.0:
   version "0.12.0"
   resolved "http://storage.mds.yandex.net/get-npm/45674/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b"