react-docgen

library8.0.3jsnpmunverified

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.

web-framework

npm install react-docgen

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-DOCGEN

react-docgen

web-frameworkjavascriptv8.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

parse

✓ import { parse } from 'react-docgen';

✗ const { parse } = require('react-docgen');

ESM is the preferred module system. While CommonJS `require` might work with transpilers, direct ESM imports are recommended for modern Node.js environments.

parseWithCustomResolvers

✓ import { parseWithCustomResolvers } from 'react-docgen';

✗ import parseWithCustomResolvers from 'react-docgen/lib/parseWithCustomResolvers';

Use named imports from the main package entry point. Direct imports from `lib/` paths are not stable API.

handlers

✓ import { handlers } from 'react-docgen';

✗ const handlers = require('react-docgen').handlers;

The `handlers` object contains various default handlers for parsing component features like `propTypeHandler`, `defaultPropsHandler`, etc.

resolver.findAllExportedComponentDefinitions

✓ import { resolver } from 'react-docgen'; const componentResolver = resolver.findAllExportedComponentDefinitions;

✗ import { findAllExportedComponentDefinitions } from 'react-docgen/dist/resolver';

Resolvers are exposed via the `resolver` object. Access specific resolvers as properties of this object, not via direct deep imports.

DocgenResult

✓ import type { DocgenResult } from 'react-docgen';

✗ import { DocgenResult } from 'react-docgen';

TypeScript types should be imported using `import type` to ensure they are stripped from the JavaScript output.

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.

import { parse, resolver, handlers } from 'react-docgen'; import path from 'path'; const componentSource = ` /** * A button component for user interaction. */ interface ButtonProps { /** * The text content of the button. */ label: string; /** * Callback fired when the button is clicked. */ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; /** * Whether the button is disabled. * @default false */ disabled?: boolean; } function Button({ label, onClick, disabled = false }: ButtonProps) { return ( <button onClick={onClick} disabled={disabled}> {label} </button> ); } export default Button; `; try { const results = parse( componentSource, resolver.findAllExportedComponentDefinitions, Object.values(handlers), { filename: 'Button.tsx' } ); if (results.length > 0) { const doc = results[0]; console.log(`Component Name: ${doc.displayName}`); console.log(`Description: ${doc.description}`); console.log('Props:'); for (const propName in doc.props) { const prop = doc.props[propName]; console.log(` - ${propName}: ${prop.description} (Type: ${prop.type?.name}, Required: ${prop.required}, Default: ${prop.defaultValue?.value})`); } } else { console.log('No component definition found.'); } } catch (error) { console.error('Error parsing component:', error); }

react-docgen --version

Debug

Known issues

breakingVersion 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.

fix

Upgrade your Node.js environment to a compatible version (e.g., Node.js 20.9.0+ or 22.0.0+).

affects: >=8.0.0

gotchaParsing 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.

fix

For advanced use cases, refer to the `react-docgen` documentation on GitHub for examples of creating and using `customResolvers` and `customHandlers` with `parseWithCustomResolvers`.

affects: >=1.0.0

gotchaAs 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.

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.

affects: >=1.0.0

gotcha`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.

fix

Ensure that all props intended for documentation are statically defined in the component's source code, typically through TypeScript interfaces, JSDoc, or PropTypes.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'react-docgen'

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.

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.

SyntaxError: Unknown type: VoidPattern

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`.

fix

Update `react-docgen` to version 8.0.1 or newer (`npm update react-docgen` or `yarn upgrade react-docgen`).

Error: No component definition found for ...

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.

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.

Upgrade

Version history

8.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/reactjs/react-docgen ↗

packagehttps://www.npmjs.com/package/react-docgen ↗

homepagehttps://react-docgen.js.org ↗