{"id":21713917,"url":"https://github.com/cytle/remark-react-docgen-typescript","last_synced_at":"2026-04-17T02:34:00.196Z","repository":{"id":74068541,"uuid":"293429891","full_name":"cytle/remark-react-docgen-typescript","owner":"cytle","description":"Import React component documentation by react-docgen-typescript","archived":false,"fork":false,"pushed_at":"2020-09-29T09:28:13.000Z","size":758,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T19:31:16.283Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cytle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["jsynowiec"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-09-07T05:22:45.000Z","updated_at":"2022-03-14T15:04:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c838cf1-025f-4373-a8de-9edac8547eab","html_url":"https://github.com/cytle/remark-react-docgen-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cytle/remark-react-docgen-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fremark-react-docgen-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fremark-react-docgen-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fremark-react-docgen-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fremark-react-docgen-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cytle","download_url":"https://codeload.github.com/cytle/remark-react-docgen-typescript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fremark-react-docgen-typescript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31912513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T00:28:45.347Z","updated_at":"2026-04-17T02:33:59.553Z","avatar_url":"https://github.com/cytle.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jsynowiec"],"categories":[],"sub_categories":[],"readme":"[![TypeScript version][ts-badge]][typescript-4-0]\n[![Node.js version][nodejs-badge]][nodejs]\n[![APLv2][license-badge]][license]\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fcytle%2Fremark-react-docgen-typescript%2Fbadge\u0026style=flat)](https://actions-badge.atrox.dev/cytle/remark-react-docgen-typescript/goto)\n\n\n# remark-react-docgen-typescript\n\n[remark](https://github.com/remarkjs/remark) plugin to transform React component to Markdown by  [`react-docgen-typescript`](https://github.com/styleguidist/react-docgen-typescript)\n\n## Getting Started\n\n``` sh\nyarn add -D remark-react-docgen-typescript\n```\n\n``` ts\nimport * as remark from 'remark';\nimport * as reactDocgenTypescript from 'remark-react-docgen-typescript';\nimport * as vfile from 'to-vfile';\n\nconst doc = vfile.readSync('README.md');\nconsole.log(remark().use(reactDocgenTypescript).processSync(doc).contents);\n```\n\nThe Component [`Column.tsx`](./__tests__/components/Column/Column.tsx)\n\n``` tsx\nimport * as React from \"react\";\nimport { Component } from \"react\";\n\n/**\n * Column properties.\n */\nexport interface IColumnProps {\n  /** prop1 description */\n  prop1?: string;\n  /** prop2 description */\n  prop2: number;\n  /**\n   * prop3 description\n   */\n  prop3: () =\u003e void;\n  /** prop4 description */\n  prop4: \"option1\" | \"option2\" | \"option3\";\n}\n\n/**\n * Form column.\n */\nexport class Column extends Component\u003cIColumnProps\u003e {\n  render() {\n    return \u003cdiv\u003eTest\u003c/div\u003e;\n  }\n}\n```\n\nConvert the following Markdown:\n\n``` markdown\n# foo-components\n\n## API\n\n[Column](./Column.tsx \"react-docgen-typescript:\")\n```\n\nInto\n\n``` markdown\n# foo-components\n\n## API\n\n### Column\n\nForm column.\n\n#### Props\n\n| Name               | Type                                | Default value | Description              |\n| ------------------ | ----------------------------------- | ------------- | ------------------------ |\n| prop1              | string                              | \"red\"         | prop1 description        |\n| prop2 _(required)_ | number                              |               | prop2 description        |\n| prop3 _(required)_ | () =\u003e void                          |               | prop3 description a \\| b |\n| prop4 _(required)_ | \"option1\" \\| \"option2\" \\| \"option3\" |               | prop4 description 中文   |\n```\n\n## Options\n\n### `remark().use(reactDocgenTypescript[, options])`\n\n#### render\n\nCustom document rendering\n\n``` ts\nimport * as remark from 'remark';\nimport * as reactDocgenTypescript from 'remark-react-docgen-typescript';\nimport { ReactDocgenTypescriptRender } from 'remark-react-docgen-typescript/build/types';\nimport * as vfile from 'to-vfile';\nimport * as stringWidth from 'string-width';\nimport { componentDocTableMdastBuilder } from 'react-docgen-typescript-markdown-render';\n\nconst tableRender = (componentDoc: ComponentDoc): Table =\u003e componentDocTableMdastBuilder(componentDoc, [\n  { title: '属性', render: (vo) =\u003e u('strong', [u('text', vo.name)]) },\n  { title: '描述', render: (vo) =\u003e vo.description,},\n  { title: '类型', render: (vo) =\u003e u('inlineCode', vo.type.name) },\n  { title: '默认值', render: (vo) =\u003e vo.defaultValue ? vo.defaultValue.value : '-' },\n]);\n\nconst render: ReactDocgenTypescriptRender = (docs) =\u003e u('root', docs.map(vo =\u003e tableRender(vo)));;\n\nconst doc = vfile.readSync('README.md');\n\nconst { contents } = remark()\n  .use({\n    settings: { stringLength: stringWidth }\n  })\n  .use(reactDocgenTypescript, { render })\n  .processSync(doc);\nconsole.log(contents);\n```\n\n## License\n\nLicensed under the APLv2. See the [LICENSE](https://github.com/jsynowiec/node-typescript-boilerplate/blob/master/LICENSE) file for details.\n\n[ts-badge]: https://img.shields.io/badge/TypeScript-4.0-blue.svg\n[typescript-4-0]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html\n[nodejs-badge]: https://img.shields.io/badge/Node.js-\u003e=%2012.13-blue.svg\n[nodejs]: https://nodejs.org/dist/latest-v12.x/docs/api/\n[license-badge]: https://img.shields.io/badge/license-APLv2-blue.svg\n[license]: https://github.com/jsynowiec/node-typescript-boilerplate/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcytle%2Fremark-react-docgen-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcytle%2Fremark-react-docgen-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcytle%2Fremark-react-docgen-typescript/lists"}