babel-plugin-react-docgen-typescript

babel-plugin-react-docgen-typescript is a Babel Plugin to generate docgen data from React components written in TypeScript.

Installation

Requirements

@babel/core

$ npm install --save-dev babel-plugin-react-docgen-typescript

Usage

Via .bablerc

{
  "plugins": [
    [
      "babel-plugin-react-docgen-typescript",
      {
        "docgenCollectionName": "STORYBOOK_REACT_CLASSES",
        "include": "components.*\\.tsx$",
        "exclude": "stories\\.tsx$"
      }
    ]
  ]
}

Performance

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.

Settings

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"]`
skipPropsWithoutDoc	false	boolean	This option is passed along to `react-docgen-typescript`'s parser. It globally ignores props without documentation.	`true`
shouldExtractLiteralValuesFromEnum	false	boolean	This option is passed along to `react-docgen-typescript`'s parser. It convert string enums and unions to docgen enum format. Possible values are still accessible.	`true`
shouldExtractValuesFromUnion	false	boolean	This option is passed along to `react-docgen-typescript`'s parser. It convert multiple types to docgen enum format. Possible values are still accessible.	`true`
docgenCollectionName	false	string	Enables collecting docgen data into a global object. This is used to integrate with tools like Storybook.	`"STORYBOOK_REACT_CLASSES"`
include	false	string	A regular expression of files to pass along to `react-docgen-typescript`'s parser. Defaults to `\.tsx$`.	`"components.*\\.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 `.stories.tsx` from being processed in your component directories.	`"stories\\.tsx$"`