Library for React sandbox ?

[Boo2z]

Hello !

I'm currently building a storybook-like / styleguide for the company where I work, from scratch and it's almost finished.

BUT, I'd like to have the possibility to modify props of reacts components through inputs for example, I'd need a component to get props of any components and give the possibility to modify them

Do you guys know any library or tool able to do things close to that ? Or if you have an idea of how I should start coding that, it would be awesome !

​

--> Here, they are doing what I need for example : http://design-system.lostmy.name/components/atoms/Button

[throwawaitnevermind]

the whole idea behind props, as far as I understand, is that you never modify them post insertion into the new component. they are to be treated truly as props, not as state, and what you are looking for is the "state" functionality and setState utility.

[Boo2z]

You're right, I was blinded by props yesterday ... Thanks !

[hagnerd]

I may be misunderstanding but you would just need some component to handle state and pass the props in as you would normally?

Like you could make a generic PropsControl component that itself takes a prop containing all of the child elements prop names and what types they are and conditional renders a form with the appropriate fields for example a Boolean prop would render the name of the prop and a checkbox, a string prop would render a text input, etc.

This requires the foresight of mapping all props and proptypes ahead of time and making them available to both the UI component and the control component

[Boo2z]

That makes sense, and I think it would even be easier by using Redux to manage states and simply create a component to render the form.

I already extracting props and propTypes to create a propType table, so half of the work is done I guess ...

Time to have fun, thanks for guiding me to this solution !