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.4.0",
@@ -86,8 +86,8 @@
     "husky": "^1.3.1",
     "jest": "^24.7.1",
     "prettier": "^1.16.4",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "~16.6.3",
+    "react-dom": "~16.6.3",
     "release-script": "^1.0.2",
     "rimraf": "^2.6.3",
     "rollup": "^1.9.0",

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'
@@ -101,17 +102,12 @@ export const EXITING = 'exiting'
  * `'exiting'` to `'exited'`.
  */
 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
@@ -140,10 +136,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 }
@@ -230,8 +222,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()
@@ -358,11 +350,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

@@ -9926,15 +9926,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"
@@ -9945,6 +9936,16 @@ react-dom@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react-dom@~16.6.3:
+  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"
@@ -10046,15 +10047,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"
@@ -10065,6 +10057,16 @@ react@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react@~16.6.3:
+  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"
@@ -10772,10 +10774,12 @@ sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-schedule@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.5.0.tgz#c128fffa0b402488b08b55ae74bb9df55cc29cc8"
+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: