Helpers for providing and consuming multiple react contexts

index.js

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'));