Dynamic examples in react-styleguidist

Question

all.

I just started using react-styleguidist and am loving the ease of use. However, I would like to add dynamic examples to the documentation. i.e. examples that a viewer of the docs can interact with by changing the props via buttons, events, and other async interactions.

Right now i can only seem to generate doc examples like this in markdown

js <MyComponent propOne="something static" />

Is there away around this, I would like to be able to document and develop at the same time and not have to also use react-storybook.

Thanks,

Answer 1

Answer from Styleguidist docs:

Each example has its own state that you can access as state variable and change with setState() function. Default state is {} and can be set with initialState.

Answer 2

It depends on what your intention is here, but you can certainly start to simulate all the pieces you would need for more interactivity. From my understanding, React Styleguidist is to document single self contained components. So if you start wrapping up your component interactivity at a higher level, you can much more easily expose that component because you will have less props and state to simulate.

I have found that Storybook to perhaps be a better tool at allowing people to simulate and experiment with the interactivity of components. It is a different tool, more of a components builder, and comes with knobs and actions that give you simple helpers that will easily allow you to build up from a more atomic level, and then add more and more components together. At the end you end up with a very verbose list (and single component view) as apposed to something that looks and feels much more like a living styleguide (think of bootstrap documentation).

I recently gave a talk about the differences between these two tools and it might be a good reference to see if one better suits your needs than the other.

I have found that it is best to use Storybook to develop your components, expose interactivity, and gain feedback from designers. Styleguidist is more of a tool of documenting a complete system, and how components work in isolation and tandem.

Keep in mind the more complex the component and the properties injected, the more difficult it will be to simulate and stub those components in. The more atomic (in design) and closer to pure functional / rendering visual properties they are, the easier they will be to document and likely to reuse or otherwise extend in projects.