1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00

setup global store

This commit is contained in:
Matthias Kretschmann 2018-09-16 21:33:42 +02:00
parent dd65d44904
commit b001dc9fa3
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 39 additions and 0 deletions

View File

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

View File

@ -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' 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 // Page Transitions & Layout
export const wrapPageElement = wrapPageElementWithTransition export const wrapPageElement = wrapPageElementWithTransition

View File

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

17
src/store/provider.jsx Normal file
View File

@ -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>
}
}