remark-react-docgen

remark plugin to transform React component to Markdown by react-docgen

Getting Started

yarn add -D remark-react-docgen

import * as remark from 'remark';
import * as reactDocgen from 'remark-react-docgen';
import * as vfile from 'to-vfile';

const doc = vfile.readSync('README.md');
console.log(remark().use(reactDocgen).processSync(doc).contents);

The Component Column.jsx

import * as React from "react";
import PropTypes from 'prop-types';

/**
 * Form column.
 */
export const Column = () => {
  return <div>Test</div>;
}

Column.propTypes = {
  /**
   * prop1 description
   */
  prop1: PropTypes.string,
  /** prop2 description */
  prop2: PropTypes.number.isRequired,
  /**
   * prop3 description a | b
   */
  prop3: PropTypes.func().isRequired,
  /** prop4 description 中文 */
  prop4: PropTypes.isRequired.oneOf(["option1", "option2" ,"option3"]),
};

Column.defaultProps = {
  prop1: "red",
  prop5: "default",
};

Convert the following Markdown:

# foo-components

## API

[Column](./Column.jsx "react-docgen:")

Into

# foo-components

## API

### Column

Form column.

#### Props

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

Options

`remark().use(reactDocgen[, options])`

render

Custom document rendering

import * as remark from 'remark';
import * as reactDocgen from 'remark-react-docgen';
import { ReactDocgenRender } from 'remark-react-docgen/build/types';
import * as vfile from 'to-vfile';
import * as stringWidth from 'string-width';
import { tableMdastBuilder } from 'react-docgen-markdown-render';

const tableRender = (doc: DocumentationObject): Table => {
  const dataSource = Object.keys(doc.props).map(name => ({...doc.props[name], name}));
  return tableMdastBuilder(dataSource, [
    { title: '属性', render: (vo) => u('strong', [u('text', vo.name)]) },
    { title: '描述', render: (vo) => vo.description,},
    { title: '类型', render: (vo) => u('inlineCode', generatePropType(vo)) },
    { title: '默认值', render: (vo) => vo.defaultValue ? vo.defaultValue.value : '-' },
  ])
};

const render: ReactDocgenRender = (docs) => u('root', docs.map(vo => tableRender(vo)));

const doc = vfile.readSync('README.md');

const { contents } = remark()
  .use({
    settings: { stringLength: stringWidth }
  })
  .use(reactDocgen, { render })
  .processSync(doc);
console.log(contents);

License

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