diff --git a/packages/gatsby-react-router-scroll/package.json b/packages/gatsby-react-router-scroll/package.json
index 6c23e23f917ce..4ac30e076a2a8 100644
--- a/packages/gatsby-react-router-scroll/package.json
+++ b/packages/gatsby-react-router-scroll/package.json
@@ -25,10 +25,10 @@
"license": "MIT",
"main": "index.js",
"peerDependencies": {
- "@reach/router": "^1.0",
+ "@reach/router": "^1.0.0",
"gatsby": "^2.0.0",
- "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
- "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
+ "react": "^16.4.2",
+ "react-dom": "^16.4.2"
},
"repository": {
"type": "git",
diff --git a/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js b/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js
index d8080ae989488..8cb69e53fbd0b 100644
--- a/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js
+++ b/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js
@@ -4,16 +4,14 @@ import PropTypes from "prop-types"
import { globalHistory as history } from "@reach/router/lib/history"
import SessionStorage from "./StateStorage"
+export const ScrollBehaviorContext = React.createContext()
+
const propTypes = {
shouldUpdateScroll: PropTypes.func,
children: PropTypes.element.isRequired,
location: PropTypes.object.isRequired,
}
-const childContextTypes = {
- scrollBehavior: PropTypes.object.isRequired,
-}
-
class ScrollContext extends React.Component {
constructor(props, context) {
super(props, context)
@@ -26,12 +24,6 @@ class ScrollContext extends React.Component {
})
}
- getChildContext() {
- return {
- scrollBehavior: this,
- }
- }
-
componentDidUpdate(prevProps) {
const { location } = this.props
const prevLocation = prevProps.location
@@ -84,11 +76,14 @@ class ScrollContext extends React.Component {
}
render() {
- return React.Children.only(this.props.children)
+ return (
+
+ {React.Children.only(this.props.children)}
+
+ )
}
}
ScrollContext.propTypes = propTypes
-ScrollContext.childContextTypes = childContextTypes
export default ScrollContext
diff --git a/packages/gatsby-react-router-scroll/src/ScrollContainer.js b/packages/gatsby-react-router-scroll/src/ScrollContainer.js
index 7bfc3bfc4ccb5..1373b8c41791c 100644
--- a/packages/gatsby-react-router-scroll/src/ScrollContainer.js
+++ b/packages/gatsby-react-router-scroll/src/ScrollContainer.js
@@ -2,6 +2,7 @@ import React from "react"
import ReactDOM from "react-dom"
import warning from "warning"
import PropTypes from "prop-types"
+import { ScrollBehaviorContext } from "./ScrollBehaviorContext"
const propTypes = {
scrollKey: PropTypes.string.isRequired,
@@ -9,16 +10,9 @@ const propTypes = {
children: PropTypes.element.isRequired,
}
-const contextTypes = {
- // This is necessary when rendering on the client. However, when rendering on
- // the server, this container will do nothing, and thus does not require the
- // scroll behavior context.
- scrollBehavior: PropTypes.object,
-}
-
class ScrollContainer extends React.Component {
- constructor(props, context) {
- super(props, context)
+ constructor(props) {
+ super(props)
// We don't re-register if the scroll key changes, so make sure we
// unregister with the initial scroll key just in case the user changes it.
@@ -26,7 +20,7 @@ class ScrollContainer extends React.Component {
}
componentDidMount() {
- this.context.scrollBehavior.registerElement(
+ this.props.context.registerElement(
this.props.scrollKey,
ReactDOM.findDOMNode(this), // eslint-disable-line react/no-find-dom-node
this.shouldUpdateScroll
@@ -56,7 +50,7 @@ class ScrollContainer extends React.Component {
}
componentWillUnmount() {
- this.context.scrollBehavior.unregisterElement(this.scrollKey)
+ this.props.context.unregisterElement(this.scrollKey)
}
shouldUpdateScroll = (prevRouterProps, routerProps) => {
@@ -67,7 +61,7 @@ class ScrollContainer extends React.Component {
// Hack to allow accessing scrollBehavior._stateStorage.
return shouldUpdateScroll.call(
- this.context.scrollBehavior.scrollBehavior,
+ this.props.context.scrollBehavior,
prevRouterProps,
routerProps
)
@@ -78,7 +72,12 @@ class ScrollContainer extends React.Component {
}
}
-ScrollContainer.propTypes = propTypes
-ScrollContainer.contextTypes = contextTypes
+const ScrollContainerConsumer = props => (
+
+ {context => }
+
+)
+
+ScrollContainerConsumer.propTypes = propTypes
-export default ScrollContainer
+export default ScrollContainerConsumer