use new context api

package.json

@@ -24,26 +24,26 @@
     "babel-cli": "6.26.0",
     "babel-core": "6.26.3",
     "babel-eslint": "9.0.0",
-    "babel-jest": "23.4.2",
+    "babel-jest": "23.6.0",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
-    "enzyme": "3.5.0",
-    "enzyme-adapter-react-16": "1.3.1",
-    "eslint": "5.5.0",
-    "eslint-config-prettier": "3.0.1",
+    "enzyme": "3.8.0",
+    "enzyme-adapter-react-16": "1.7.1",
+    "eslint": "5.10.0",
+    "eslint-config-prettier": "3.3.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-prettier": "2.6.2",
     "eslint-plugin-react": "7.11.1",
-    "jest": "23.5.0",
-    "prettier": "1.14.2",
+    "jest": "23.6.0",
+    "prettier": "1.15.3",
     "prop-types": "15.6.2",
-    "react": "16.4.2",
-    "react-dom": "16.4.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "rimraf": "2.6.2"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0 || ^16.0.0"
+    "react": "^16.7.0"
   },
   "babel": {
     "presets": [

src/Tunnel.js

@@ -1,16 +1,15 @@
 import { Component } from 'react'
 import PropTypes from 'prop-types'
 import uniqueId from './uniqueId'
+import { TunnelContext } from './context'
 
 class Tunnel extends Component {
   static propTypes = {
     id: PropTypes.string,
     render: PropTypes.func,
   }
 
-  static contextTypes = {
-    tunnelState: PropTypes.object,
-  }
+  static contextType = TunnelContext
 
   itemId = uniqueId()
 

src/TunnelPlaceholder.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component, Fragment } from 'react'
+import { TunnelContext } from './context'
 
 class TunnelPlaceholder extends Component {
   static propTypes = {
@@ -13,13 +14,12 @@ class TunnelPlaceholder extends Component {
     component: Fragment,
   }
 
-  static contextTypes = {
-    tunnelState: PropTypes.object,
-  }
+  static contextType = TunnelContext
 
   componentDidMount() {
     const { id } = this.props
     const { tunnelState } = this.context
+
     tunnelState.subscribe(id, this.handlePropsChange)
   }
 
@@ -35,6 +35,7 @@ class TunnelPlaceholder extends Component {
 
   render() {
     const { tunnelState } = this.context
+
     const {
       id,
       children: renderChildren,

src/TunnelProvider.js

@@ -1,26 +1,21 @@
 import PropTypes from 'prop-types'
-import { Children, Component } from 'react'
+import React, { Children, Component } from 'react'
+import { TunnelContext } from './context'
 import TunnelState from './TunnelState'
 
 class TunnelProvider extends Component {
   static propTypes = {
     children: PropTypes.node,
   }
 
-  static childContextTypes = {
-    tunnelState: PropTypes.object,
-  }
-
-  tunnelState = new TunnelState()
-
-  getChildContext() {
-    return {
-      tunnelState: this.tunnelState,
-    }
-  }
+  tunnelState = { tunnelState: new TunnelState() }
 
   render() {
-    return Children.only(this.props.children)
+    return (
+      <TunnelContext.Provider value={this.tunnelState}>
+        {Children.only(this.props.children)}
+      </TunnelContext.Provider>
+    )
   }
 }
 

src/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const TunnelContext = createContext({ tunnelState: null })