Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Automate Documentation Generation in your Typescript React Codebase with Storybook

    react-storybookReact Storybook

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

    In this short video I show how to set up the react-docgen-typescript-webpack-plugin, a neat plugin that leverages the types you are -already- writing for Typescript to autogenerate documentation.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: We're going to add React.gen Typescript webpack plugin. To configure the plugin, we're going to go to the webpack config and import it. All we need to use it is to just push it into the plugins list of the default config.

    Now, when you run Storybook, this is what you see. You should see the prop type section populated with extra fields. Sometimes, you find you want annotate individual props to tell your users what each of them might do.

    Head over to button.tsx, and add extra comments on top of your interface. When you reload, you should get full indications of descriptions of each prop, as well as whether something is required, and whether there is a default value.