react-docgen-typescript-markdown-render

Markdown render for react-docgen-typescript

Getting Started

yarn add react-docgen-typescript-markdown-render

import { markdownRender } from 'react-docgen-typescript-markdown-render';
import * as path from 'path';
import { parse } from 'react-docgen-typescript';

const componentDocs = parse('Column.tsx', {
  savePropValueAsString: true,
})
console.log(markdownRender(componentDocs));

The Component Column.tsx

import * as React from "react";
import { Component } from "react";

/**
 * Column properties.
 */
export interface IColumnProps {
  /** prop1 description */
  prop1?: string;
  /** prop2 description */
  prop2: number;
  /**
   * prop3 description
   */
  prop3: () => void;
  /** prop4 description */
  prop4: "option1" | "option2" | "option3";
}

/**
 * Form column.
 */
export class Column extends Component<IColumnProps> {
  render() {
    return <div>Test</div>;
  }
}

Into

### Column

Form column.

#### Props

| Name               | Type                                | Default value | Description              |
| ------------------ | ----------------------------------- | ------------- | ------------------------ |
| prop1              | string                              | "red"         | prop1 description        |
| prop2 _(required)_ | number                              |               | prop2 description        |
| prop3 _(required)_ | () => void                          |               | prop3 description a \| b |
| prop4 _(required)_ | "option1" \| "option2" \| "option3" |               | prop4 description 中文   |

License

Licensed under the APLv2. See the LICENSE file for details.