@storybook/react-docgen-typescript-plugin
Advanced tools
Package description
The @storybook/react-docgen-typescript-plugin is a plugin for Storybook, designed to enhance the documentation of React components written in TypeScript. It automatically generates prop tables and documentation for your components based on the TypeScript definitions. This helps in creating more informative and readable Storybook stories, making it easier for developers to understand the props and functionalities of the components.
Automatic Prop Documentation
This feature automatically generates documentation for the props of React components based on their TypeScript definitions. The configuration snippet above shows how to set up the plugin in the `.storybook/main.js` file, enabling automatic prop documentation in Storybook.
module.exports = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
{
name: '@storybook/preset-typescript',
options: {
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
},
],
};Similar to @storybook/react-docgen-typescript-plugin, this package is a webpack loader that generates documentation for your React components based on TypeScript definitions. While both packages aim to enhance component documentation, react-docgen-typescript-loader works at the webpack level, requiring manual configuration in your webpack config, whereas @storybook/react-docgen-typescript-plugin is specifically designed to integrate with Storybook's ecosystem, offering a more seamless setup for Storybook users.
This package also enhances Storybook with React component documentation, leveraging react-docgen under the hood. It differs from @storybook/react-docgen-typescript-plugin by not being specifically tied to TypeScript. It's more general-purpose, working with both JavaScript and TypeScript components. However, for projects heavily using TypeScript, @storybook/react-docgen-typescript-plugin might provide more detailed and accurate documentation due to its direct integration with TypeScript's type system.
Changelog
Readme
A webpack plugin to inject react typescript docgen information
npm install --save-dev react-docgen-typescript-plugin
# or
yarn add -D react-docgen-typescript-plugin
NOTE: The TypeScript compiler options
allowSyntheticDefaultImportsandesModuleInteropwill makereact-docgen-typescript-plugina lot harder! Turn them off for faster build times.
const ts = require('typescript');
const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin").default;
module.exports = {
plugins: [
// Will default to loading your root tsconfig.json
new ReactDocgenTypescriptPlugin(),
// or with a specific tsconfig
new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.dev.json" }),
// or with compiler options
new ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } }),
],
};
This plugins support all parser options from react-docgen-typescript and all of the following options
| Option | Type | Description | Default |
|---|---|---|---|
| tsconfigPath | string | Specify the location of the tsconfig.json to use. | null |
| compilerOptions | object | Specify compiler options. Cannot be used with tsconfigPath | null |
| docgenCollectionName | string or null | Specify the docgen collection name to use. All docgen information will be collected into this global object. Set to null to disable. | STORYBOOK_REACT_CLASSES |
| setDisplayName | boolean | Set the components' display name. If you want to set display names yourself or are using another plugin to do this, you should disable this option. | true |
| typePropName | string | Specify the name of the property for docgen info prop type. | type |
| exclude | glob[] | Glob patterns to ignore and not generate docgen information for. (Great for ignoring large icon libraries) | [] |
| include | glob[] | Glob patterns to generate docgen information for | ['**/**.tsx'] |
If you want to see how this plugins is including and excluding modules set the DEBUG environment variable.
DEBUG=docgen:* - All logsDEBUG=docgen:include - Included modulesDEBUG=docgen:exclude - Excluded modulesDEBUG=docgen:docs - Generated docsDEBUG=docgen:* npm run storybook
Another great way of debugging your generated docs is to use a
debuggerstatement in your component source file. If you turn off source maps you will be able to see the code that this package generates.
Thanks goes to these wonderful people (emoji key):
 Andrew Lisowski 💻 🎨 📖 🤔 🚧 🚇 ⚠️ |  Michael Shilman 💻 |  Kyle Herock 💻 |  Juho Vepsäläinen 🚇 ⚠️ 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
A webpack plugin to inject react typescript docgen information.
The npm package @storybook/react-docgen-typescript-plugin receives a total of 2,614,717 weekly downloads. As such, @storybook/react-docgen-typescript-plugin popularity was classified as popular.
We found that @storybook/react-docgen-typescript-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 27 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.