Autoplay

    Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

    Shawn WangShawn Wang

    Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

    Here I show how to set up the Info addon to make your Storybook stories into interactive documentation, including the best way to style the Info addon to your heart's desires.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Start by adding the info addon to your storybook project. The info addon doesn't require additional configuration on top of what you already have. You just have a function called withInfo, which you can wrap around your existing elements.

    00:23 Inside withInfo, you can type in some descriptive texts. Now, when you run storybook, it will show the text. If you click show info on the top right, you will see a description of the component, as also source and types if you use prop types.

    00:47 WithInfo does this markdown, so you can do things like escaping and putting code blocks within your markdown for further descriptive ability. If you save it over here, you should be able to see that additional markdown up in your info box.

    01:08 You can optionally style your info box by passing in an object, and declaring the component styles, like so. Here, I am putting a red color on the H1s, and passing in the same text that I used to have -- description, button.

    01:45 If I reload over here, I can see that the H1 has been styled. I don't necessarily recommend defining your own styles inline every single time. I do like setting up utilities folder, utilities.js, and then defining the styles that I like, particularly the inline display, and then using this as a high-order component from my other stories.

    02:12 Over in my stories, I can just replace withInfo with my new utility, wInfo from utilities. Wherever I used to say withInfo, I can just say wInfo and skip the styling. That seems a lot more reasonable to use.

    02:38 Now, when I refresh, this is how it looks by default, with everything inline and no additional click needed on the top right.

    Discuss

    Discuss