See Live examples (built with development env)
This project was bootstrapped with Create React App.
You can read how to perform common tasks in this guide here.
Install with npm install, run with npm start. It will run on http://localhost:3000/.
Uses simplified Provider and Consumer wrappers that accept contexts as arguments. (demo)
<Provide
theme={[ThemeContext, this.state.theme]}
color={[ColorContext, this.state.color]}
>
<SomeIntermediate text="Super!"/>
</Provide>
// ... later in SomeIntermediate.jsx
<Consume
theme={ThemeContext}
color={ColorContext}
>
{({color, theme}) => (
<Box
{...props}
style={{
backgroundColor: theme.background,
color: color.color,
}}
/>
)}
</Consume>It is implemented using Array.reduce and under the hood it wraps your FaaC (Function as a Child) with all provided contexts. See code here.
This demo demonstrates the direct state manipulation and its effects on the component itself and its (nested) children.
See this SO answer for details.
this.setState(state => {
state.nested.flag = false
state.another.deep.prop = true
return state
})
this.setState(state => (state.nested.flag = false, state))