{"library":"react-docgen-typescript","title":"React TypeScript Docgen Parser","description":"This library, `react-docgen-typescript`, provides a robust parser for extracting documentation information from React components written in TypeScript. It analyzes TypeScript files to generate documentation data, similar to how `react-docgen` works for JavaScript components with `propTypes`. The current stable version is 2.4.0, with releases occurring semi-frequently, indicating active maintenance and feature development based on recent changelogs. Its primary differentiator is its native support for TypeScript, allowing it to correctly interpret complex type definitions, interfaces, and generics to generate detailed prop tables, including descriptions, types, and default values. It is often used in conjunction with tools like React Styleguidist to automatically generate component documentation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-docgen-typescript"],"cli":null},"imports":["import { parse } from 'react-docgen-typescript'","import { withDefaultConfig } from 'react-docgen-typescript'","import { withCustomConfig } from 'react-docgen-typescript'","import type { ComponentDoc } from 'react-docgen-typescript'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { withCustomConfig } from 'react-docgen-typescript';\nimport * as fs from 'fs';\nimport * as path from 'path';\n\n// Define a dummy component file for demonstration\nconst componentCode = `\nimport React from 'react';\n\ninterface ButtonProps {\n  /**\n   * The text content of the button.\n   */\n  label: string;\n  /**\n   * Is this the principal call to action on the page?\n   * @default false\n   */\n  primary?: boolean;\n  /**\n   * What background color to use\n   */\n  backgroundColor?: string;\n  /**\n   * How large should the button be?\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Optional click handler\n   */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * A primary button component\n */\nexport const Button: React.FC<ButtonProps> = ({\n  label,\n  primary = false,\n  backgroundColor,\n  size = 'medium',\n  onClick,\n}) => {\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n  return (\n    <button\n      type=\"button\"\n      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}\n      style={{ backgroundColor }}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  );\n};\n`;\n\nconst tempDir = path.join(__dirname, 'temp');\nif (!fs.existsSync(tempDir)) {\n  fs.mkdirSync(tempDir);\n}\nconst tempComponentPath = path.join(tempDir, 'Button.tsx');\nfs.writeFileSync(tempComponentPath, componentCode);\n\n// Create a basic tsconfig.json for the parser\nconst tsconfigPath = path.join(tempDir, 'tsconfig.json');\nfs.writeFileSync(tsconfigPath, JSON.stringify({\n  compilerOptions: {\n    jsx: \"react\",\n    module: \"ESNext\",\n    target: \"ESNext\",\n    esModuleInterop: true,\n    strict: true,\n    skipLibCheck: true,\n  },\n  include: [tempDir + \"/**/*\"]\n}, null, 2));\n\n\nconst parser = withCustomConfig(tsconfigPath, {\n  shouldExtractLiteralValuesFromEnum: true,\n  propFilter: {\n    skipPropsWithoutDoc: true,\n  },\n});\n\ntry {\n  const componentDocs = parser.parse(tempComponentPath);\n  console.log(JSON.stringify(componentDocs, null, 2));\n} catch (error) {\n  console.error(\"Error parsing component:\", error);\n} finally {\n  // Clean up temporary files\n  fs.unlinkSync(tempComponentPath);\n  fs.unlinkSync(tsconfigPath);\n  fs.rmdirSync(tempDir);\n}\n","lang":"typescript","description":"This example demonstrates how to parse a TypeScript React component using `withCustomConfig` to specify a `tsconfig.json` and custom docgen options, then prints the generated documentation to the console.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}