Babel Plugin to generate docgen data from React components written in TypeScript.
npm install babel-plugin-react-docgen-typescriptbabel-plugin-react-docgen-typescript is a Babel Plugin to generate docgen data from React components written in TypeScript.
* @babel/core
$ npm install --save-dev babel-plugin-react-docgen-typescript
Via .bablerc
``json`
{
"plugins": [
[
"babel-plugin-react-docgen-typescript",
{
"docgenCollectionName": "STORYBOOK_REACT_CLASSES",
"include": "components.*\\.tsx$",
"exclude": "stories\\.tsx$"
}
]
]
}
This plugin calls out to a parser from react-docgen-typescript for all files ending in .tsx$. This is very inefficient. This plugin is a bit of a hack.
To speed things up a bit, it is recommended to include the plugin settings include and exclude to restrict parsing to your component directories.
| Setting | Required | Type | Description | Example |
| -------------------- | ------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| skipPropsWithName | false | string[] or string | This option is passed along to react-docgen-typescript's parser. It globally ignores props with the specified name(s). | "classname" or ["classname", "color"] |react-docgen-typescript
| skipPropsWithoutDoc | false | boolean | This option is passed along to 's parser. It globally ignores props without documentation. | true |react-docgen-typescript
| shouldExtractLiteralValuesFromEnum | false | boolean | This option is passed along to 's parser. It convert string enums and unions to docgen enum format. Possible values are still accessible. | true |react-docgen-typescript
| shouldExtractValuesFromUnion | false | boolean | This option is passed along to 's parser. It convert multiple types to docgen enum format. Possible values are still accessible. | true |"STORYBOOK_REACT_CLASSES"
| docgenCollectionName | false | string | Enables collecting docgen data into a global object. This is used to integrate with tools like Storybook. | |react-docgen-typescript
| include | false | string | A regular expression of files to pass along to 's parser. Defaults to \.tsx$. | "components.*\\.tsx$" |.stories.tsx
| exclude | false | string | A regular expression to filter the results from include. For instance, you can add a regular expression to prevent files ending in from being processed in your component directories. | "stories\\.tsx$"` |