Quick Parsing

Simple one-line parsing functionality for extracting React component documentation with default TypeScript configurations.

Capabilities

Parse Function

Parses React component files with default TypeScript options and returns component documentation.

/**
 * Parses a file with default TS options
 * @param filePathOrPaths - Component file path(s) that should be parsed
 * @param parserOpts - Options used to parse the files
 * @returns Array of component documentation objects
 */
function parse(
  filePathOrPaths: string | string[],
  parserOpts: ParserOptions = defaultParserOpts
): ComponentDoc[];

Usage Examples:

import { parse } from "react-docgen-typescript";

// Parse a single file
const docs = parse("./src/Button.tsx");

// Parse multiple files
const docs = parse([
  "./src/Button.tsx", 
  "./src/Input.tsx",
  "./src/Modal.tsx"
]);

// Parse with options
const docs = parse("./src/Button.tsx", {
  savePropValueAsString: true,
  shouldExtractLiteralValuesFromEnum: true,
  propFilter: {
    skipPropsWithName: ['className', 'style']
  }
});

Default Parser Options

The default parser options used when none are specified.

const defaultParserOpts: ParserOptions;

Default TypeScript Compiler Options

The default TypeScript compiler options used by the parse function.

const defaultOptions: ts.CompilerOptions;

The default options include:

{
  jsx: ts.JsxEmit.React,
  module: ts.ModuleKind.CommonJS,
  target: ts.ScriptTarget.Latest,
  esModuleInterop: true
}

Component Detection

The parser automatically detects various types of React components:

• Function Components: Regular function declarations and arrow functions
• Class Components: Classes extending React.Component or React.PureComponent
• Forward Ref Components: Components wrapped with React.forwardRef
• Memo Components: Components wrapped with React.memo
• Higher-Order Components: Components returned from HOC patterns
• Styled Components: Components created with styled-components library

Error Handling

The parse function will throw errors in the following cases:

• File Not Found: When specified file paths don't exist
• TypeScript Compilation Errors: When TypeScript cannot compile the source files
• Invalid Component Syntax: When component definitions are malformed

import { parse } from "react-docgen-typescript";

try {
  const docs = parse("./src/Component.tsx");
  console.log(docs);
} catch (error) {
  console.error("Parsing failed:", error.message);
}