Docz: Built-in component for controlled components

[danburzo]

_Disclaimer: I'm just now reading through the docs, maybe I have missed it. Apologies in advance :)_

Since React 16.4, having mixed-control components (that work either via a value prop and onChange callback, or with an internal state) are discouraged, if cumbersome to build.

I wonder if there could be a built-in component that can manage the state for a controlled component:

<Controller>
{ (state, setState) => 
    <MyComponent value={state.value} onChange={ value => setState({ value }) } />
}
</Controller>

[denisborovikov]

Have you seen react-powerplug?

[danburzo]

@denisborovikov no, I haven't, that's exactly what I was looking for, thank you very much! :)
I'll leave this open for now, in case a built-in component is still on the table, but I'm very happy with this resolution ✌️

[pedronauck]

Hi @danburzo. Isn't our plans create something like that exactly because react-powerplug is awesome and can fit so good with docz. Built-in components need to be something that have some dependency from docz data or environment!

[danburzo]

Makes sense, thank you!

[jedrichards]

Wouldn't an api like the below make Playground much more useful out of the box?

<Playground state={{value: ''}}>
  {
    ({state, setState}) => (
      <input
        value={state.value},
        onChange={e => setState({ value: e.target.value })}
      />
    )
  }
</Playground>

It would be completely optional and opt-in (i.e. using a render prop as opposed to children). Should be super easy to implement with react-powerplug under the hood.

[pedronauck]

I think that is not a good idea @jedrichards, this will put extra concerns for Playground. In the future, we'll put knobs on it, and this can bloat the component a lot.