Docz: dynamic update component in playground?

[alexprigi]

Is it possible to dynamic update a component in Playground?

Description
I would like to have a working example in the Playground.
In my case I have a toggle component and I want to change the status of the selection when the user clicks the component

name: UIToggle
menu: Components

import { Playground, PropsTable } from 'docz'
import UIToggle  from './index.js'
let isToggled = true;
const _onToggleStateChange = () => {
  console.log(isToggled);
  isToggled = !isToggled;
}

# UIToggle

Hello, I'm still a mdx file, but now I have a button component!


<PropsTable of={UIToggle} />

<Playground>
    <UIToggle isToggled={isToggled} onToggle={ _onToggleStateChange } ></UIToggle>
</Playground>

This is my code. The variable isToggled is updated when the user clicks, but the components don't receive any update.

[wldcordeiro]

Right now I had to make this stuff in a separate file and import it in. I could see some kind of knob system added though to playground similar to storybook's knobs. I think an API like this could work within mdx

I'd need to dig in more to the knobs implementation but this seemed like a decent compromise to work within mdx.

https://github.com/storybooks/storybook/tree/master/addons/knobs

<Playground>
  {makeKnob => {
    const isToggled = makeKnob({ type: 'boolean', label: 'Toggle UI Element', defaultValue: false });
    return <UIToggle isToggled={isToggled} />;
  }}
</Playground>

[rakannimer]

I used react-component-component to create local state on the page and update it.

Example

Code

So in your case it would be :

import Component from "react-component-component";
<Playground>
  <Component initialState={{ isToggled: false }}>
    {component => {
      return (
        <UIToggle
          isToggled={component.state.isToggled}
          onToggle={() => {
            component.setState(state => ({ isToggled: !state.isToggled }));
          }}
        />
      );
    }}
  </Component>
</Playground>;

Hope that helps !

[pedronauck]

react-powerplug can be an easy option in this case too. Add knobs on playground is something that's already on our roadmap and is the next thing that I thinking to do ✌️ You can give some vote on the roadmap to keep eyes on track.

[alexprigi]

Rakannimer's solution works!
Thank you

[dotlouis]

This would help being documented. I searched for quite some time before getting here.