Autoplay

    Display the JSX of a React Storybook Story with the JSX Addon

    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.

    Storybook has a rich Addons ecosystem that really adds a lot to the developer experience. Here I show how to set up the JSX Addon in Storybook to display the code behind React components. The juxtaposition of code and visual display can be very effective documentation for any users of your components.

    reactReact
    ^16.0.0
    react-storybookReact Storybook
    ^3.0.0
    javascriptJavaScript
    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:01 First, we're going to install some dev dependencies for Storybook/Addons. In particular, we're going to use the JSXAddon.

    00:09 To configure the Addons, we're going to create a new file in the Storybook folder called Addons.js, then just declare our dependency StorybookAddonJSX/register, and that calls it within. Internally, this executes a registration function.

    00:28 Now over in config.js, we're going to import an additional function called setAddon from Storybook/React, and we're going to import JSXAddon from StorybookAddonJSX. Then we're just going to pair them together with setAddon, JSXAddon.

    00:50 That's all the setup we need to do. Now we can use this globally in any of those stories by just saying addWithJSX for any JSX component. Since we're using a React code base, this is basically all the components.

    01:07 Now when I run Storybook, and then I refresh on the right, I can see the JSX of whatever the component I'm demonstrating on the top.

    Discuss

    Discuss