npmpackage.info

Gathering detailed insights and metrics for react-docgen-typescript

react-docgen-typescript - 2.4.0 | npmpackage.info

react-docgen-typescript

A simple parser for react properties defined in typescript instead of propTypes.

2.4.0

1,238

MIT

TypeScript

257.02 kB

3.8

Installations

npm install react-docgen-typescript

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.9.0

NPM Version

10.8.3 Score

Supply Chain

100

Quality

85.1

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

2

Total

281

Closed

61

Merged

218

Issues

Open

4

Total

238

Closed

234

Releases

v.2.4.0

v2.4.0

Updated on Jun 05, 2025

v2.2.3-next

v2.2.3

Updated on Jun 05, 2025

v2.2.2

Updated on Dec 11, 2021

v2.2.1

Updated on Dec 01, 2021

v2.1.1

Updated on Oct 09, 2021

v2.1.0

Updated on Aug 01, 2021

View All 73 releases

Languages

TypeScript

TypeScript (100%)

Developer

styleguidist

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,238 Stars

603 Commits

257 Forks

8 Watchers

11 Branches

76 Contributors

Updated on Jun 28, 2025

Maintainers

View All 76 Contributors

Package Meta Information

Latest Version

2.4.0

Package Id

react-docgen-typescript@2.4.0

Unpacked Size

257.02 kB

Size

46.58 kB

File Count

NPM Version

10.8.3

Node Version

22.9.0

Published on

Jun 10, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

typescript

Dev Dependencies

@types/chai @types/lodash @types/mocha @types/node @types/prop-types @types/react @types/source-map-support chai eslint husky install lint-staged lodash mocha prettier prop-types react source-map-support typescript

react-docgen-typescript

A simple parser for React properties defined in TypeScript instead of propTypes.

It can be used with React Styleguidist.

Installation

1npm install --save-dev react-docgen-typescript

Usage

To parse a file for docgen information use the parse function.

1const docgen = require("react-docgen-typescript");
2
3const options = {
4  savePropValueAsString: true,
5};
6
7// Parse a file for docgen info
8docgen.parse("./path/to/component", options);

If you want to customize the typescript configuration or docgen options, this package exports a variety of ways to create custom parsers.

1const docgen = require("react-docgen-typescript");
2
3// Create a parser with the default typescript config and custom docgen options
4const customParser = docgen.withDefaultConfig(options);
5
6const docs = customParser.parse("./path/to/component");
7
8// Create a parser with the custom typescript and custom docgen options
9const customCompilerOptionsParser = docgen.withCompilerOptions(
10  { esModuleInterop: true },
11  options
12);
13
14// Create a parser with using your typescript config
15const tsConfigParser = docgen.withCustomConfig("./tsconfig.json", {
16  savePropValueAsString: true,
17});

React Styleguidist integration

Include following line in your styleguide.config.js:

1module.exports = {
2  propsParser: require("react-docgen-typescript").withDefaultConfig([
3    parserOptions,
4  ]).parse,
5};

or if you want to use custom tsconfig file

1module.exports = {
2  propsParser: require("react-docgen-typescript").withCustomConfig(
3    "./tsconfig.json",
4    [parserOptions]
5  ).parse,
6};

Options

`propFilter`

The propFilter option allows you to omit certain props from documentation generation.

You can either provide and object with some of our pre-configured filters:

1interface FilterOptions {
2  skipPropsWithName?: string[] | string;
3  skipPropsWithoutDoc?: boolean;
4}
5
6const options = {
7  propFilter: {
8    skipPropsWithName: ['as', 'id'];
9    skipPropsWithoutDoc: true;
10  }
11}

If you do not want to print out all the HTML attributes of a component typed like the following:

1const MyComponent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ()...

you can provide a propFilter function and do the filtering logic yourself.

1type PropFilter = (prop: PropItem, component: Component) => boolean;
2
3const options = {
4  propFilter: (prop: PropItem, component: Component) => {
5    if (prop.declarations !== undefined && prop.declarations.length > 0) {
6      const hasPropAdditionalDescription = prop.declarations.find((declaration) => {
7        return !declaration.fileName.includes("node_modules");
8      });
9
10      return Boolean(hasPropAdditionalDescription);
11    }
12
13    return true;
14  },
15};

Note: children without a doc comment will not be documented.

`componentNameResolver`

1(exp: ts.Symbol, source: ts.SourceFile) => string | undefined | null | false;

If a string is returned, then the component will use that name. Else it will fallback to the default logic of parser.

`shouldExtractLiteralValuesFromEnum`: boolean

If set to true, string enums and unions will be converted to docgen enum format. Useful if you use Storybook and want to generate knobs automatically using addon-smart-knobs.

`shouldExtractValuesFromUnion`: boolean

If set to true, every unions will be converted to docgen enum format.

`shouldSortUnions`: boolean

When used in combination with shouldExtractValuesFromUnion or shouldExtractLiteralValuesFromEnum, sorts union members in string-sort order when set to true. This is useful for ensuring the same order of members every time.

`skipChildrenPropWithoutDoc`: boolean (default: `true`)

If set to false the docs for the children prop will be generated even without an explicit description.

`shouldRemoveUndefinedFromOptional`: boolean

If set to true, types that are optional will not display " | undefined" in the type.

`savePropValueAsString`: boolean

If set to true, defaultValue to props will be string. Example:

1Component.defaultProps = {
2  counter: 123,
3  disabled: false,
4};

Will return:

1  counter: {
2      defaultValue: '123',
3      required: true,
4      type: 'number'
5  },
6  disabled: {
7      defaultValue: 'false',
8      required: true,
9      type: 'boolean'
10  }

Styled components example:

1componentNameResolver: (exp, source) =>
2  exp.getName() === "StyledComponentClass" && getDefaultExportForFile(source);

The parser exports getDefaultExportForFile helper through its public API.

Example

In the example folder you can see React Styleguidist integration.

Warning: only named exports are supported. If your project uses default exports, you still need to include named exports for react-docgen-typescript.

The component Column.tsx

1import * as React from "react";
2import { Component } from "react";
3
4/**
5 * Column properties.
6 */
7export interface IColumnProps {
8  /** prop1 description */
9  prop1?: string;
10  /** prop2 description */
11  prop2: number;
12  /**
13   * prop3 description
14   */
15  prop3: () => void;
16  /** prop4 description */
17  prop4: "option1" | "option2" | "option3";
18}
19
20/**
21 * Form column.
22 */
23export class Column extends Component<IColumnProps, {}> {
24  render() {
25    return <div>Test</div>;
26  }
27}

Will generate the following stylesheet:

Stylesheet example

The functional component Grid.tsx

1import * as React from "react";
2
3/**
4 * Grid properties.
5 */
6export interface IGridProps {
7  /** prop1 description */
8  prop1?: string;
9  /** prop2 description */
10  prop2: number;
11  /**
12   * prop3 description
13   */
14  prop3: () => void;
15  /** Working grid description */
16  prop4: "option1" | "option2" | "option3";
17}
18
19/**
20 * Form Grid.
21 */
22export const Grid = (props: IGridProps) => {
23  const smaller = () => {
24    return;
25  };
26  return <div>Grid</div>;
27};

Will generate the following stylesheet:

Stylesheet example

Contributions

The typescript is pretty complex and there are many different ways how to define components and their props so it's realy hard to support all these use cases. That means only one thing, contributions are highly welcome. Just keep in mind that each PR should also include tests for the part it's fixing.

Thanks to all contributors without their help there wouldn't be a single bug fixed or feature implemented. Check the contributors tab to find out more. All those people supported this project. THANK YOU!

Thanks to others

The integration with React Styleguidist wouldn't be possible without Vyacheslav Slinko pull request #118 at React Styleguidist.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

80 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

3.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-docgen-typescript

Installations

Developer Guide

Yes

CommonJS

22.9.0

10.8.3

Score

Pull Requests

2

281

61

218

Issues

4

238

234

Releases

Languages

Developer

styleguidist

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

react-docgen-typescript

Installation

Usage

React Styleguidist integration

Options

propFilter

componentNameResolver

shouldExtractLiteralValuesFromEnum: boolean

shouldExtractValuesFromUnion: boolean

shouldSortUnions: boolean

skipChildrenPropWithoutDoc: boolean (default: true)

shouldRemoveUndefinedFromOptional: boolean

savePropValueAsString: boolean

Example

Contributions

Thanks to others

10

10

10

10

4

0

0

0

0

0

0

0

0

3.8

/10

`propFilter`

`componentNameResolver`

`shouldExtractLiteralValuesFromEnum`: boolean

`shouldExtractValuesFromUnion`: boolean

`shouldSortUnions`: boolean

`skipChildrenPropWithoutDoc`: boolean (default: `true`)

`shouldRemoveUndefinedFromOptional`: boolean

`savePropValueAsString`: boolean