README.md

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/.

React Experiments

• Context API - Provider & Consumer Wrappers (demo)
• setState flow & direct state mutation (demo)

Context API - Provider & Consumer Wrappers

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.

setState flow & direct state mutation

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