{"id":13452485,"url":"https://github.com/styleguidist/react-docgen-typescript","last_synced_at":"2025-05-11T13:58:59.128Z","repository":{"id":38238229,"uuid":"58213651","full_name":"styleguidist/react-docgen-typescript","owner":"styleguidist","description":"A simple parser for react properties defined in typescript instead of propTypes.","archived":false,"fork":false,"pushed_at":"2025-02-18T00:55:06.000Z","size":1762,"stargazers_count":1224,"open_issues_count":14,"forks_count":253,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-09T08:05:21.572Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styleguidist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-05-06T14:40:29.000Z","updated_at":"2025-05-09T06:39:00.000Z","dependencies_parsed_at":"2023-02-02T20:16:49.567Z","dependency_job_id":"c0b1414a-088f-430d-9d6c-87dbba5836ba","html_url":"https://github.com/styleguidist/react-docgen-typescript","commit_stats":{"total_commits":411,"total_committers":86,"mean_commits":4.77906976744186,"dds":0.6520681265206812,"last_synced_commit":"6803c921247fddcb3ef6b79a19ae64fe7d06cd27"},"previous_names":[],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styleguidist%2Freact-docgen-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styleguidist%2Freact-docgen-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styleguidist%2Freact-docgen-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styleguidist%2Freact-docgen-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styleguidist","download_url":"https://codeload.github.com/styleguidist/react-docgen-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253460386,"owners_count":21912199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:01:25.482Z","updated_at":"2025-05-11T13:58:59.105Z","avatar_url":"https://github.com/styleguidist.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-docgen-typescript\n\n[![Build Status](https://github.com/styleguidist/react-docgen-typescript/actions/workflows/nodejs.yml/badge.svg)](https://github.com/styleguidist/react-docgen-typescript/actions/workflows/nodejs.yml)\n\n![](https://nodei.co/npm/react-docgen-typescript.png?downloadRank=true\u0026downloads=true)\n\nA simple parser for React properties defined in TypeScript instead of propTypes.\n\nIt can be used with [React Styleguidist](https://github.com/styleguidist/react-styleguidist).\n\n## Installation\n\n```bash\nnpm install --save-dev react-docgen-typescript\n```\n\n## Usage\n\nTo parse a file for docgen information use the `parse` function.\n\n```ts\nconst docgen = require(\"react-docgen-typescript\");\n\nconst options = {\n  savePropValueAsString: true,\n};\n\n// Parse a file for docgen info\ndocgen.parse(\"./path/to/component\", options);\n```\n\nIf you want to customize the typescript configuration or docgen options, this package exports a variety of ways to create custom parsers.\n\n```ts\nconst docgen = require(\"react-docgen-typescript\");\n\n// Create a parser with the default typescript config and custom docgen options\nconst customParser = docgen.withDefaultConfig(options);\n\nconst docs = customParser.parse(\"./path/to/component\");\n\n// Create a parser with the custom typescript and custom docgen options\nconst customCompilerOptionsParser = docgen.withCompilerOptions(\n  { esModuleInterop: true },\n  options\n);\n\n// Create a parser with using your typescript config\nconst tsConfigParser = docgen.withCustomConfig(\"./tsconfig.json\", {\n  savePropValueAsString: true,\n});\n```\n\n### React Styleguidist integration\n\nInclude following line in your `styleguide.config.js`:\n\n```javascript\nmodule.exports = {\n  propsParser: require(\"react-docgen-typescript\").withDefaultConfig([\n    parserOptions,\n  ]).parse,\n};\n```\n\nor if you want to use custom tsconfig file\n\n```javascript\nmodule.exports = {\n  propsParser: require(\"react-docgen-typescript\").withCustomConfig(\n    \"./tsconfig.json\",\n    [parserOptions]\n  ).parse,\n};\n```\n\n## Options\n\n### `propFilter`\n\nThe `propFilter` option allows you to omit certain props from documentation generation.\n\nYou can either provide and object with some of our pre-configured filters:\n\n```typescript\ninterface FilterOptions {\n  skipPropsWithName?: string[] | string;\n  skipPropsWithoutDoc?: boolean;\n}\n\nconst options = {\n  propFilter: {\n    skipPropsWithName: ['as', 'id'];\n    skipPropsWithoutDoc: true;\n  }\n}\n```\n\nIf you do not want to print out all the HTML attributes of a component typed like the following:\n\n```typescript\nconst MyComponent: React.FC\u003cReact.HTMLAttributes\u003cHTMLDivElement\u003e\u003e = ()...\n```\n\nyou can provide a `propFilter` function and do the filtering logic yourself.\n\n```typescript\ntype PropFilter = (prop: PropItem, component: Component) =\u003e boolean;\n\nconst options = {\n  propFilter: (prop: PropItem, component: Component) =\u003e {\n    if (prop.declarations !== undefined \u0026\u0026 prop.declarations.length \u003e 0) {\n      const hasPropAdditionalDescription = prop.declarations.find((declaration) =\u003e {\n        return !declaration.fileName.includes(\"node_modules\");\n      });\n\n      return Boolean(hasPropAdditionalDescription);\n    }\n\n    return true;\n  },\n};\n```\n\nNote: `children` without a doc comment will not be documented.\n\n### `componentNameResolver`\n\n```typescript\n(exp: ts.Symbol, source: ts.SourceFile) =\u003e string | undefined | null | false;\n```\n\nIf a string is returned, then the component will use that name. Else it will fallback to the default logic of parser.\n\n### `shouldExtractLiteralValuesFromEnum`: boolean\n\nIf 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/storybookjs/addon-smart-knobs).\n\n### `shouldExtractValuesFromUnion`: boolean\n\nIf set to true, every unions will be converted to docgen enum format.\n\n### `shouldSortUnions`: boolean\n\nWhen 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.\n\n### `skipChildrenPropWithoutDoc`: boolean (default: `true`)\n\nIf set to false the docs for the `children` prop will be generated even without an explicit description.\n\n### `shouldRemoveUndefinedFromOptional`: boolean\n\nIf set to true, types that are optional will not display \" | undefined\" in the type.\n\n### `savePropValueAsString`: boolean\n\nIf set to true, defaultValue to props will be string.\nExample:\n\n```javascript\nComponent.defaultProps = {\n  counter: 123,\n  disabled: false,\n};\n```\n\nWill return:\n\n```javascript\n  counter: {\n      defaultValue: '123',\n      required: true,\n      type: 'number'\n  },\n  disabled: {\n      defaultValue: 'false',\n      required: true,\n      type: 'boolean'\n  }\n```\n\n**Styled components example:**\n\n```typescript\ncomponentNameResolver: (exp, source) =\u003e\n  exp.getName() === \"StyledComponentClass\" \u0026\u0026 getDefaultExportForFile(source);\n```\n\n\u003e The parser exports `getDefaultExportForFile` helper through its public API.\n\n## Example\n\nIn the example folder you can see React Styleguidist integration.\n\n**Warning:** only named exports are supported. If your project uses default exports, you still need to include named exports for `react-docgen-typescript`.\n\nThe component [`Column.tsx`](./examples/react-styleguidist-example/components/Column.tsx)\n\n```javascript\nimport * as React from \"react\";\nimport { Component } from \"react\";\n\n/**\n * Column properties.\n */\nexport interface IColumnProps {\n  /** prop1 description */\n  prop1?: string;\n  /** prop2 description */\n  prop2: number;\n  /**\n   * prop3 description\n   */\n  prop3: () =\u003e void;\n  /** prop4 description */\n  prop4: \"option1\" | \"option2\" | \"option3\";\n}\n\n/**\n * Form column.\n */\nexport class Column extends Component\u003cIColumnProps, {}\u003e {\n  render() {\n    return \u003cdiv\u003eTest\u003c/div\u003e;\n  }\n}\n```\n\nWill generate the following stylesheet:\n\n![Stylesheet example](https://github.com/styleguidist/react-docgen-typescript/raw/master/stylesheet-example-column.png \"Stylesheet example\")\n\nThe functional component [`Grid.tsx`](./examples/react-styleguidist-example/components/Grid.tsx)\n\n```javascript\nimport * as React from \"react\";\n\n/**\n * Grid properties.\n */\nexport interface IGridProps {\n  /** prop1 description */\n  prop1?: string;\n  /** prop2 description */\n  prop2: number;\n  /**\n   * prop3 description\n   */\n  prop3: () =\u003e void;\n  /** Working grid description */\n  prop4: \"option1\" | \"option2\" | \"option3\";\n}\n\n/**\n * Form Grid.\n */\nexport const Grid = (props: IGridProps) =\u003e {\n  const smaller = () =\u003e {\n    return;\n  };\n  return \u003cdiv\u003eGrid\u003c/div\u003e;\n};\n```\n\nWill generate the following stylesheet:\n\n![Stylesheet example](https://github.com/styleguidist/react-docgen-typescript/raw/master/stylesheet-example-grid.png \"Stylesheet example\")\n\n## Contributions\n\nThe typescript is pretty complex and there are many different ways how\nto define components and their props so it's realy hard to support all\nthese use cases. That means only one thing, contributions are highly\nwelcome. Just keep in mind that each PR should also include tests for\nthe part it's fixing.\n\nThanks to all contributors without their help there wouldn't be a single\nbug fixed or feature implemented. Check the [**contributors**](https://github.com/styleguidist/react-docgen-typescript/graphs/contributors) tab to find out\nmore. All those people supported this project. **THANK YOU!**\n\n## Thanks to others\n\nThe integration with React Styleguidist wouldn't be possible without [Vyacheslav Slinko](https://github.com/vslinko) pull request [#118](https://github.com/styleguidist/react-styleguidist/pull/118) at React Styleguidist.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyleguidist%2Freact-docgen-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyleguidist%2Freact-docgen-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyleguidist%2Freact-docgen-typescript/lists"}