Automate Documentation Generation in your Typescript React Codebase with 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.
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.