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$" |

License

MIT