Skip to content

Instantly share code, notes, and snippets.

@JSila

JSila/index.js

Created Mar 4, 2018
Embed
What would you like to do?
Helpers for providing and consuming multiple react contexts
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import createContext from 'create-react-context'
const Theme = createContext("light")
const Language = createContext("en")
const Whatever = createContext("whatever")
const Consume = ({contexts, children}) => {
const values = []
const _consume = ctxs => {
const [First, ...rest] = ctxs
return (
<First.Consumer>
{value => {
values.push(value)
return rest.length ? _consume(rest) : children(...values)
}}
</First.Consumer>
)
}
return _consume(contexts)
}
const Provide = ({contexts, children}) => {
return contexts.reduce((res, [Context, value]) => {
return React.createElement(Context.Provider, {
children: res,
value
})
}, children);
}
class Root extends Component {
constructor(props) {
super(props)
this.state = {
language: 'sl',
theme: 'dark'
}
this.toggleTheme = this.toggleTheme.bind(this)
this.toggleLanguage = this.toggleLanguage.bind(this)
}
toggleLanguage() {
return this.setState(state => ({
language: state.language === "en" ? "sl": "en"
}))
}
toggleTheme() {
return this.setState(state => ({
theme: state.theme === "light" ? "dark": "light"
}))
}
render() {
const contexts = [
[Theme, this.state.theme],
[Language, this.state.language]
]
return (
<Provide contexts={contexts}>
<Consume contexts={[Theme, Language, Whatever]}>
{(theme, language, whatever) => (
<App theme={theme} language={language} whatever={whatever} />
)}
</Consume>
<button onClick={this.toggleTheme}>Toggle theme</button>
<button onClick={this.toggleLanguage}>Toggle language</button>
</Provide>
)
}
}
ReactDOM.render(<Root/>, document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment