{"library":"react-docgen","title":"React Docgen","description":"React Docgen is a library designed to extract information from React components, primarily for the purpose of generating documentation. It parses React component source code to identify prop types, default props, method definitions, and other relevant metadata, which can then be used by documentation tools or style guides. The current stable version is 8.0.3. The project maintains an active development pace, with frequent patch releases addressing bug fixes and minor improvements, while major versions primarily update Node.js compatibility. Its key differentiator is its direct association with the React ecosystem, offering robust AST parsing specifically tailored for React components, including support for various component definition patterns and TypeScript types.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-docgen"],"cli":{"name":"react-docgen","version":null}},"imports":["import { parse } from 'react-docgen';","import { parseWithCustomResolvers } from 'react-docgen';","import { handlers } from 'react-docgen';","import { resolver } from 'react-docgen';\nconst componentResolver = resolver.findAllExportedComponentDefinitions;","import type { DocgenResult } from 'react-docgen';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { parse, resolver, handlers } from 'react-docgen';\nimport path from 'path';\n\nconst componentSource = `\n/**\n * A button component for user interaction.\n */\ninterface ButtonProps {\n  /**\n   * The text content of the button.\n   */\n  label: string;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nfunction Button({ label, onClick, disabled = false }: ButtonProps) {\n  return (\n    <button onClick={onClick} disabled={disabled}>\n      {label}\n    </button>\n  );\n}\n\nexport default Button;\n`;\n\ntry {\n  const results = parse(\n    componentSource,\n    resolver.findAllExportedComponentDefinitions,\n    Object.values(handlers),\n    { filename: 'Button.tsx' }\n  );\n\n  if (results.length > 0) {\n    const doc = results[0];\n    console.log(`Component Name: ${doc.displayName}`);\n    console.log(`Description: ${doc.description}`);\n    console.log('Props:');\n    for (const propName in doc.props) {\n      const prop = doc.props[propName];\n      console.log(`  - ${propName}: ${prop.description} (Type: ${prop.type?.name}, Required: ${prop.required}, Default: ${prop.defaultValue?.value})`);\n    }\n  } else {\n    console.log('No component definition found.');\n  }\n} catch (error) {\n  console.error('Error parsing component:', error);\n}\n","lang":"typescript","description":"This quickstart demonstrates how to use `react-docgen` to parse a TypeScript React functional component, extracting its display name, description, and detailed prop information including types, descriptions, and default values.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}