React-styleguidist: What's your recommendation on showcasing sticky React Components within React-Styleguidist?

Created on 24 Apr 2018  路  1Comment  路  Source: styleguidist/react-styleguidist

In our project, we are using this awesome tool for presenting the development of the React components and widgets. So far so good.

Now, I need to seek the proper way to present sticky elements with working examples.
Initially, I though of just writing within a blank document a small React based JS example to render the component to show in a new tab, after a button click action (this button would be the one to show within the styleguidist).

I wonder, though, whether you think there could be a better approach to this.
I've searched across the repo and I got nothing similar to this issue I'm raising.

Any idea is more than welcome.
Thanks in advance.

question

Most helpful comment

Sticky components? Are you talking about position: sticky?

If yes, I would recommend adding a button that toggles visibility of the component in your example. The component is hidden by default, click the button to show, click the button to hide. Very useful for things like modal windows, popup notifications, or elements with position: fixed or position: sticky. Alternatively you can add a special display mode to your component that makes it work in a slightly different way from how it should look like in production, and a button that toggles this mode on and off. Useful for animated things (stopped by default, click to start the animation), and can be made to work with position: fixed too.

https://github.com/styleguidist/react-styleguidist/issues/930 might also be relevant to you.

>All comments

Sticky components? Are you talking about position: sticky?

If yes, I would recommend adding a button that toggles visibility of the component in your example. The component is hidden by default, click the button to show, click the button to hide. Very useful for things like modal windows, popup notifications, or elements with position: fixed or position: sticky. Alternatively you can add a special display mode to your component that makes it work in a slightly different way from how it should look like in production, and a button that toggles this mode on and off. Useful for animated things (stopped by default, click to start the animation), and can be made to work with position: fixed too.

https://github.com/styleguidist/react-styleguidist/issues/930 might also be relevant to you.

Was this page helpful?
0 / 5 - 0 ratings