1×
Become a member
to unlock all features
Autoplay

    Automate Documentation Generation in your Typescript React Codebase with Storybook

    Shawn WangShawn Wang
    reactReact
    webpackwebpack
    react-storybookReact Storybook
    javascriptJavaScript

    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.

    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 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.

    00:18 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.

    00:32 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.

    Discuss

    Discuss