// @flowimport React, { type Node } from'react';import createReactContext, { type Context } from'mini-create-react-context';typeTheme='light'|'dark';// Pass a default theme to ensure type correctnessconstThemeContext:Context<Theme> =createReactContext('light');classThemeTogglerextendsReact.Component< { children:Node }, { theme:Theme }> { state = { theme:'light' };render() {return (// Pass the current context value to the Provider's `value` prop.// Changes are detected using strict comparison (Object.is) <ThemeContext.Providervalue={this.state.theme}> <buttononClick={() => {this.setState(state => ({ theme:state.theme ==='light'?'dark':'light' })); }} > Toggle theme </button> {this.props.children} </ThemeContext.Provider> ); }}classTitleextendsReact.Component<{ children:Node }> {render() {return (// The Consumer uses a render prop API. Avoids conflicts in the// props namespace. <ThemeContext.Consumer> {theme => ( <h1style={{ color: theme ==='light'?'#000':'#fff' }}> {this.props.children} </h1> )} </ThemeContext.Consumer> ); }}
Compatibility
This package only "ponyfills" the React.createContext API, not other unrelated React 16+ APIs. If you are using a version of React <16, keep in mind that you can only use features available in that version.
For example, you cannot pass children types aren't valid pre React 16:
It will throw A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. because <Context.Provider> can only receive a single child element. To fix the error just wrap everyting in a single <div>: