Gathering detailed insights and metrics for remark-react-docgen-typescript
Installations
npm install remark-react-docgen-typescriptDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>= 12.13
Node Version
13.13.0
NPM Version
6.14.4
Score
66.4
Supply Chain
97.2
Quality
74.6
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
1
Love this project? Help keep it running — sponsor us today! 🚀
Download Statistics
Total Downloads
6,852
Last Day
1
Last Week
8
Last Month
59
Last Year
916
Bundle Size
81.73 kB
Minified
26.18 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.7
Package Id
remark-react-docgen-typescript@0.1.7
Unpacked Size
31.51 kB
Size
10.02 kB
File Count
27
NPM Version
6.14.4
Node Version
13.13.0
Total Downloads
Cumulative downloads
Total Downloads
6,852
Last Day
-50%
1
Compared to previous day
Last Week
-50%
8
Compared to previous week
Last Month
490%
59
Compared to previous month
Last Year
-44.9%
916
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
8
remark-react-docgen-typescript
remark plugin to transform React component to Markdown by react-docgen-typescript
Getting Started
1yarn add -D remark-react-docgen-typescript
1import * as remark from 'remark'; 2import * as reactDocgenTypescript from 'remark-react-docgen-typescript'; 3import * as vfile from 'to-vfile'; 4 5const doc = vfile.readSync('README.md'); 6console.log(remark().use(reactDocgenTypescript).processSync(doc).contents);
The Component Column.tsx
1import * as React from "react"; 2import { Component } from "react"; 3 4/** 5 * Column properties. 6 */ 7export interface IColumnProps { 8 /** prop1 description */ 9 prop1?: string; 10 /** prop2 description */ 11 prop2: number; 12 /** 13 * prop3 description 14 */ 15 prop3: () => void; 16 /** prop4 description */ 17 prop4: "option1" | "option2" | "option3"; 18} 19 20/** 21 * Form column. 22 */ 23export class Column extends Component<IColumnProps> { 24 render() { 25 return <div>Test</div>; 26 } 27}
Convert the following Markdown:
1# foo-components 2 3## API 4 5[Column](./Column.tsx "react-docgen-typescript:")
Into
1# foo-components 2 3## API 4 5### Column 6 7Form column. 8 9#### Props 10 11| Name | Type | Default value | Description | 12| ------------------ | ----------------------------------- | ------------- | ------------------------ | 13| prop1 | string | "red" | prop1 description | 14| prop2 _(required)_ | number | | prop2 description | 15| prop3 _(required)_ | () => void | | prop3 description a \| b | 16| prop4 _(required)_ | "option1" \| "option2" \| "option3" | | prop4 description 中文 |
Options
remark().use(reactDocgenTypescript[, options])
render
Custom document rendering
1import * as remark from 'remark'; 2import * as reactDocgenTypescript from 'remark-react-docgen-typescript'; 3import { ReactDocgenTypescriptRender } from 'remark-react-docgen-typescript/build/types'; 4import * as vfile from 'to-vfile'; 5import * as stringWidth from 'string-width'; 6import { componentDocTableMdastBuilder } from 'react-docgen-typescript-markdown-render'; 7 8const tableRender = (componentDoc: ComponentDoc): Table => componentDocTableMdastBuilder(componentDoc, [ 9 { title: '属性', render: (vo) => u('strong', [u('text', vo.name)]) }, 10 { title: '描述', render: (vo) => vo.description,}, 11 { title: '类型', render: (vo) => u('inlineCode', vo.type.name) }, 12 { title: '默认值', render: (vo) => vo.defaultValue ? vo.defaultValue.value : '-' }, 13]); 14 15const render: ReactDocgenTypescriptRender = (docs) => u('root', docs.map(vo => tableRender(vo)));; 16 17const doc = vfile.readSync('README.md'); 18 19const { contents } = remark() 20 .use({ 21 settings: { stringLength: stringWidth } 22 }) 23 .use(reactDocgenTypescript, { render }) 24 .processSync(doc); 25console.log(contents);
License
Licensed under the APLv2. See the LICENSE file for details.
No vulnerabilities found.
No security vulnerabilities found.