{"id":11694,"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.","status":"active","version":"8.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/reactjs/react-docgen","tags":["javascript","react","documentation","documentation-generation","typescript"],"install":[{"cmd":"npm install react-docgen","lang":"bash","label":"npm"},{"cmd":"yarn add react-docgen","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-docgen","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM is the preferred module system. While CommonJS `require` might work with transpilers, direct ESM imports are recommended for modern Node.js environments.","wrong":"const { parse } = require('react-docgen');","symbol":"parse","correct":"import { parse } from 'react-docgen';"},{"note":"Use named imports from the main package entry point. Direct imports from `lib/` paths are not stable API.","wrong":"import parseWithCustomResolvers from 'react-docgen/lib/parseWithCustomResolvers';","symbol":"parseWithCustomResolvers","correct":"import { parseWithCustomResolvers } from 'react-docgen';"},{"note":"The `handlers` object contains various default handlers for parsing component features like `propTypeHandler`, `defaultPropsHandler`, etc.","wrong":"const handlers = require('react-docgen').handlers;","symbol":"handlers","correct":"import { handlers } from 'react-docgen';"},{"note":"Resolvers are exposed via the `resolver` object. Access specific resolvers as properties of this object, not via direct deep imports.","wrong":"import { findAllExportedComponentDefinitions } from 'react-docgen/dist/resolver';","symbol":"resolver.findAllExportedComponentDefinitions","correct":"import { resolver } from 'react-docgen';\nconst componentResolver = resolver.findAllExportedComponentDefinitions;"},{"note":"TypeScript types should be imported using `import type` to ensure they are stripped from the JavaScript output.","wrong":"import { DocgenResult } from 'react-docgen';","symbol":"DocgenResult","correct":"import type { DocgenResult } from 'react-docgen';"}],"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."},"warnings":[{"fix":"Upgrade your Node.js environment to a compatible version (e.g., Node.js 20.9.0+ or 22.0.0+).","message":"Version 8.0.0 of `react-docgen` dropped support for Node.js 16, 17, 18, 19, and 21. Users must upgrade to Node.js 20.9.0 or newer 20.x versions, or Node.js 22.0.0 or any newer version.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"For advanced use cases, refer to the `react-docgen` documentation on GitHub for examples of creating and using `customResolvers` and `customHandlers` with `parseWithCustomResolvers`.","message":"Parsing complex or highly dynamic React component patterns (e.g., HOCs, render props within highly nested structures, or non-standard component definitions) might not yield complete or accurate results with default resolvers and handlers. Custom resolvers and handlers may be required.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always refer to the official GitHub repository (github.com/reactjs/react-docgen) for the most up-to-date documentation and examples, especially when encountering unexpected parsing behaviors.","message":"As of the provided package metadata, the official `README.md` for `react-docgen` was not available. Users might need to consult the GitHub repository directly for comprehensive usage examples, advanced configuration, and a full understanding of the API.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure that all props intended for documentation are statically defined in the component's source code, typically through TypeScript interfaces, JSDoc, or PropTypes.","message":"`react-docgen` primarily works with static analysis of component code. It does not execute components or rely on runtime introspection, meaning runtime-only prop definitions or dynamically generated props will not be detected.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `react-docgen` is installed (`npm install react-docgen` or `yarn add react-docgen`). For ESM projects, use `import { parse } from 'react-docgen';`. If using CommonJS, check your `tsconfig.json` or bundler settings for module resolution.","cause":"The `react-docgen` package is either not installed, or you are trying to import it using CommonJS `require()` in an ESM context (or vice-versa) without proper configuration or tooling.","error":"Error: Cannot find module 'react-docgen'"},{"fix":"Update `react-docgen` to version 8.0.1 or newer (`npm update react-docgen` or `yarn upgrade react-docgen`).","cause":"This error occurs when `react-docgen` encounters a newer JavaScript syntax feature (like a `VoidPattern`) that it doesn't recognize. This was a known issue fixed in `react-docgen@8.0.1`.","error":"SyntaxError: Unknown type: VoidPattern"},{"fix":"Verify that your component is defined and exported in a way `react-docgen` can understand (e.g., `export default function MyComponent`, `export const MyComponent = () => {}`). Consider using `parseWithCustomResolvers` and providing a custom resolver function if your component definition pattern is non-standard.","cause":"The parser could not identify any React component definition within the provided source code using the default resolvers. This can happen with unusual export patterns, higher-order components (HOCs) not explicitly handled, or incorrect file paths/content.","error":"Error: No component definition found for ..."}],"ecosystem":"npm"}