// this file has three examples of composing nexted // providers and consumers in a single component // normally you wouldn't have your entire app in a single component like this // and you wouldn't normally put a consumer right below a provider // (consumers will likely be lower in your tree) so the nesting wont // often be as big of a problem. // however, if you ever do face huge nesting problems, // react-composer is here to help! import React from 'react' import {render} from 'react-dom' import Composer from 'react-composer' const ThemeContext = React.createContext('light') class ThemeProvider extends React.Component { state = {theme: 'light'} toggleTheme = () => { this.setState(({theme}) => ({ theme: theme === 'light' ? 'dark' : 'light', })) } render() { return ( {this.props.children({toggleTheme: this.toggleTheme})} ) } } // only doing this to shield end-users from the // implementation detail of "context" const ThemeConsumer = ThemeContext.Consumer const LanguageContext = React.createContext('en') class LanguageProvider extends React.Component { state = {lang: 'en'} setLanguage = lang => { this.setState({lang}) } render() { return ( {this.props.children({setLanguage: this.setLanguage})} ) } } const LanguageConsumer = LanguageContext.Consumer const styles = { light: { padding: 20, backgroundColor: 'white', color: 'black', }, dark: { padding: 20, backgroundColor: 'black', color: 'white', }, } const translations = { en: { light: 'light', dark: 'dark', }, es: { light: 'claro', dark: 'oscuro', }, de: { light: 'hell', dark: 'dunkel', }, } // nested big time function AppNested() { return ( {({setLanguage}) => ( {({toggleTheme}) => ( {lang => ( {theme => (

)} )} )} )} ) } // using composer inline function AppComposed() { return ( , ]}> {([{setLanguage}, {toggleTheme}]) => ( , ]}> {([lang, theme]) => (

)} )} ) } // extracting the composer part function AppSuperComposeRenderer({children}) { return ( , ]}> {([{setLanguage}, {toggleTheme}]) => ( , ]}> {([lang, theme]) => children({setLanguage, toggleTheme, lang, theme})} )} ) } // so we can shove that nesting asside! function AppSuperCompose() { return ( {({setLanguage, toggleTheme, lang, theme}) => (

)} ) } render(, document.getElementById('root'))