Gathering detailed insights and metrics for react-docgen-typescript-loader-add-tag
Gathering detailed insights and metrics for react-docgen-typescript-loader-add-tag
Webpack loader to generate docgen information from Typescript React components.
Installations
npm install react-docgen-typescript-loader-add-tagDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Releases
Unable to fetch releases
Languages
2
TypeScript
JavaScript
TypeScript (99.26%)
JavaScript (0.74%)
Developer
strothj
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
NOASSERTION License
360 Stars
162 Commits
46 Forks
5 Watchers
4 Branches
14 Contributors
Updated on Jul 17, 2025
Maintainers
1
Package Meta Information
Latest Version
3.6.21
Package Id
react-docgen-typescript-loader-add-tag@3.6.21
Unpacked Size
136.23 kB
Size
32.55 kB
File Count
33
NPM Version
8.1.0
Node Version
16.13.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
Webpack loader to generate docgen information from TypeScript React components. The primary use case is to get the prop types table populated in the Storybook Info Addon.
Example Storybook project
Live Storybook
Guide
- Changelog
- Migrating from V2 to V3
- Quick Start
- Documenting Components with Storybook
- Loader Options
- Performance
- Alternative Implementation
- Limitations
- Contributing
- Credits
- License
Changelog
View Changelog.
Migrating from V2 to V3
Version 2 supported the options includes and excludes, which were arrays of regular expressions. If you made use of these options, remove them from and use the Webpack equivalents.
includes would default to ["\\.tsx$"] which meant that only files ending in the extension .ts or .tsx would be processed. This default behavior is already covered by Webpack's test field.
excludes would default to ["node_modules"]. This would prevent the processing of files in node_modules. This option was added to allow further filtering to hopefully speed up processing. When this loader is used in monorepo environments, this option would complicate configuration.
In version 3, the loader no longer performs its own filtering. If you relied on the additional filtering behavior, you should be able to reimplement it using options in Webpack.
This change shouldn't affect the majority of projects.
Quick Start
Requirements
The source code generation relies on being able to insert // @ts-ignore in a few select places and as such requires TypeScript 2.3 or above.
Package Installation
1$ npm install --save-dev react-docgen-typescript-loader 2 3or 4 5$ yarn add --dev react-docgen-typescript-loader
Webpack Configuration
IMPORTANT: Webpack loaders are executed right-to-left (or bottom-to-top). react-docgen-typescript-loader needs to be added under ts-loader.
Example Storybook config /.storybook/webpack.config.js:
Storybook 4
1const path = require("path"); 2 3module.exports = (baseConfig, env, config) => { 4 config.module.rules.push({ 5 test: /\.tsx?$/, 6 include: path.resolve(__dirname, "../src"), 7 use: [ 8 require.resolve("ts-loader"), 9 require.resolve("react-docgen-typescript-loader"), 10 ], 11 }); 12 13 config.resolve.extensions.push(".ts", ".tsx"); 14 15 return config; 16};
Storybook 3
1const path = require("path"); 2const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js"); 3 4module.exports = (baseConfig, env) => { 5 const config = genDefaultConfig(baseConfig); 6 7 config.module.rules.push({ 8 test: /\.tsx?$/, 9 include: path.resolve(__dirname, "../src"), 10 use: [ 11 require.resolve("ts-loader"), 12 require.resolve("react-docgen-typescript-loader"), 13 ], 14 }); 15 16 config.resolve.extensions.push(".ts", ".tsx"); 17 18 return config; 19};
Documenting Components with Storybook
Include the withInfo decorator as normal.
Reference the addon documentation for the latest usage instructions:
https://github.com/storybooks/storybook/tree/master/addons/info
Including Component Description
The Storybook Info Addon is able to populate the component description from your component's documentation. It does this when your story name matches the display name of your component. The prop tables will populate in either case.
In the first example you are able to see above Story Source the component description. The second example shows a story with a name different from the component. In the second example the component description is missing.
If you have a component named
TicTacToeCell, then you would have to use something like: storiesOf("...", module).add("TicTacToeCell", ...) to have the story description come from the component description.
In addition to the description from the component, you may still include story description text using the normal withInfo api.
Exporting Components
It is important to export your component using a named export for docgen information to be generated properly.
TicTacToeCell.tsx:
1import React, { Component } from "react"; 2import * as styles from "./TicTacToeCell.css"; 3 4interface Props { 5 /** 6 * Value to display, either empty (" ") or "X" / "O". 7 * 8 * @default " " 9 **/ 10 value?: " " | "X" | "O"; 11 12 /** Cell position on game board. */ 13 position: { x: number, y: number }; 14 15 /** Called when an empty cell is clicked. */ 16 onClick?: (x: number, y: number) => void; 17} 18 19/** 20 * TicTacToe game cell. Displays a clickable button when the value is " ", 21 * otherwise displays "X" or "O". 22 */ 23// Notice the named export here, this is required for docgen information 24// to be generated correctly. 25export class TicTacToeCell extends Component<Props> { 26 handleClick = () => { 27 const { 28 position: { x, y }, 29 onClick, 30 } = this.props; 31 if (!onClick) return; 32 33 onClick(x, y); 34 }; 35 36 render() { 37 const { value = " " } = this.props; 38 const disabled = value !== " "; 39 const classes = `${styles.button} ${disabled ? styles.disabled : ""}`; 40 41 return ( 42 <button 43 className={classes} 44 disabled={disabled} 45 onClick={this.handleClick} 46 > 47 {value} 48 </button> 49 ); 50 } 51} 52 53// Component can still be exported as default. 54export default TicTacToeCell;
ColorButton.stories.tsx:
1import React from "react"; 2import { storiesOf } from "@storybook/react"; 3import { withInfo } from "@storybook/addon-info"; 4import { action } from "@storybook/addon-actions"; 5import TicTacToeCell from "./TicTacToeCell"; 6 7const stories = storiesOf("Components", module); 8 9stories.add( 10 "TicTacToeCell", 11 withInfo({ inline: true })(() => ( 12 <TicTacToeCell 13 value="X" 14 position={{ x: 0, y: 0 }} 15 onClick={action("onClick")} 16 /> 17 )), 18);
Loader Options
| Option | Type | Description |
|---|---|---|
| skipPropsWithName | string[] or string | Avoid including docgen information for the prop or props specified. |
| skipPropsWithoutDoc | boolean | Avoid including docgen information for props without documentation. |
| componentNameResolver | function | If a string is returned, then the component will use that name. Else it will fallback to the default logic of parser. https://github.com/styleguidist/react-docgen-typescript#parseroptions |
| propFilter | function | Filter props using a function. If skipPropsWithName or skipPropsWithoutDoc is defined the function will not be used. Function accepts two arguments: object with information about prop and an object with information about component. Return true to include prop in documentation. https://github.com/styleguidist/react-docgen-typescript#parseroptions |
| tsconfigPath | string | Specify the location of the tsconfig.json to use. Can not be used with compilerOptions. |
| compilerOptions | typescript.CompilerOptions | Specify TypeScript compiler options. Can not be used with tsconfigPath. |
| 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. Defaults to STORYBOOK_REACT_CLASSES for use with the Storybook Info Addon. https://github.com/gongreg/react-storybook-addon-docgen |
| setDisplayName | boolean | Automatically 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. Defaults to true. This is used to preserve component display names during a production build of Storybook. |
| 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. https://github.com/styleguidist/react-docgen-typescript#parseroptions |
| savePropValueAsString | boolean | If set to true, defaultValue to props will be string. https://github.com/styleguidist/react-docgen-typescript#parseroptions |
| typePropName | string | Specify the name of the property for docgen info prop type. |
Performance
There is a significant startup cost due to the initial type parsing. Once the project is running in watch mode, things should be smoother due to Webpack caching.
Alternative Implementation
This plugin uses a Webpack loader to inject the docgen information. There is also a version which works as a Webpack plugin. I will be supporting both versions. The loader version more accurately generates the injected code blocks and should work with all module types but at the cost of a longer initial startup. The plugin version may be faster.
The Webpack plugin version is available here: https://github.com/strothj/react-docgen-typescript-loader/tree/plugin
Limitations
This plugin makes use of the project: https://github.com/styleguidist/react-docgen-typescript. It is subject to the same limitations.
React Component Class Import
When extending from React.Component as opposed to Component, docgens don't seem to be created. Ref issue #10 (thanks @StevenLangbroek for tracking down the cause).
Doesn't work:
import React from 'react';
interface IProps {
whatever?: string;
};
export default class MyComponent extends React.Component<IProps> {}
Works:
import React, { Component } from 'react';
export default class MyComponent extends Component<IProps> {}
Export Names
Component docgen information can not be generated for components that are only exported as default. You can work around the issue by exporting the component using a named export.
1import * as React from "react"; 2 3interface ColorButtonProps { 4 /** Buttons background color */ 5 color: "blue" | "green"; 6} 7 8/** A button with a configurable background color. */ 9export const ColorButton: React.SFC<ColorButtonProps> = props => ( 10 <button 11 style={{ 12 padding: 40, 13 color: "#eee", 14 backgroundColor: props.color, 15 fontSize: "2rem", 16 }} 17 > 18 {props.children} 19 </button> 20); 21 22export default ColorButton;
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Credits
SVG Logos
Projects
License
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
Found 7/22 approved changesets -- score normalized to 3
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 15 are checked with a SAST tool
Reason
134 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- 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-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- 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-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- 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-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- 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-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-ccrp-c664-8p4j
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-ch52-vgq2-943f
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-c497-v8pv-ch6x
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- 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-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- 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-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- 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-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.1
/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