setup global store

gatsby-browser.js

@@ -1,3 +1,5 @@
+import React from 'react'
+import AppProvider from './src/store/provider'
 import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
 import './src/styles/global.scss'
 
@@ -6,5 +8,11 @@ if (typeof window !== 'undefined' && !window.IntersectionObserver) {
   import('intersection-observer')
 }
 
+// React Context in Browser
+// eslint-disable-next-line
+export const wrapRootElement = ({ element }) => {
+  return <AppProvider>{element}</AppProvider>
+}
+
 // Page Transitions & Layout
 export const wrapPageElement = wrapPageElementWithTransition

gatsby-ssr.js

@@ -1,4 +1,13 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import AppProvider from './src/store/provider'
 import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
 
+export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
+  // React Context in SSR/build
+  const ConnectedBody = () => <AppProvider>{bodyComponent}</AppProvider>
+  replaceBodyHTMLString(renderToString(<ConnectedBody />))
+}
+
 // Page Transitions & Layout
 export const wrapPageElement = wrapPageElementWithTransition

src/store/createContext.jsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const { Provider, Consumer } = createContext()
+
+export { Provider, Consumer }

src/store/provider.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Provider } from './createContext'
+
+export default class AppProvider extends Component {
+  state = {
+    dark: false
+  }
+
+  static propTypes = {
+    children: PropTypes.any.isRequired
+  }
+
+  render() {
+    return <Provider value={this.state}>{this.props.children}</Provider>
+  }
+}