{"id":15103183,"url":"https://github.com/rippling/remark-mdx-react-docgen-typescript","last_synced_at":"2025-03-18T19:34:19.493Z","repository":{"id":226275233,"uuid":"749279764","full_name":"Rippling/remark-mdx-react-docgen-typescript","owner":"Rippling","description":"A mdx plugin to extract a react component documentation using react-docgen-typescript","archived":false,"fork":false,"pushed_at":"2024-03-14T14:57:52.000Z","size":132,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-03-14T22:29:40.087Z","etag":null,"topics":["documentation","mdx","mdx-js","react","react-docgen-typescript","remark","unified"],"latest_commit_sha":null,"homepage":"","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/Rippling.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-01-28T05:01:51.000Z","updated_at":"2024-03-06T17:18:04.000Z","dependencies_parsed_at":"2024-09-12T00:09:07.923Z","dependency_job_id":"4fb1544e-e006-4834-a298-820023390dec","html_url":"https://github.com/Rippling/remark-mdx-react-docgen-typescript","commit_stats":null,"previous_names":["rippling/remark-mdx-react-docgen-typescript"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-mdx-react-docgen-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-mdx-react-docgen-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-mdx-react-docgen-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rippling%2Fremark-mdx-react-docgen-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rippling","download_url":"https://codeload.github.com/Rippling/remark-mdx-react-docgen-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244289594,"owners_count":20429219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["documentation","mdx","mdx-js","react","react-docgen-typescript","remark","unified"],"created_at":"2024-09-25T19:21:56.274Z","updated_at":"2025-03-18T19:34:14.483Z","avatar_url":"https://github.com/Rippling.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `remark-mdx-react-docgen-typescript`\n\n📝 A mdx plugin to extract a react component documentation using `react-docgen-typescript`\n\n[![npm version](https://badge.fury.io/js/remark-mdx-react-docgen-typescript.svg)](https://badge.fury.io/js/remark-mdx-react-docgen-typescript)\n\n## Installation\n\n```sh\nnpm install -D remark-directive remark-mdx-react-docgen-typescript\n```\n\n## Setup\n\n```js\nimport remarkReactDocgen from 'remark-mdx-react-docgen-typescript';\n// or\n// const remarkReactDocgen = require('remark-mdx-react-docgen-typescript').default;\n```\n\nSee [**Using plugins**](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#using-plugins) for more instructions in the official documentation.\n\n## Usage\n\nFor example, given a file named example.mdx with the following contents:\n\n```md\n::component-docs{file=\"./Component.tsx\"}\n```\n\nThe following script:\n\n```js\nimport { readFile } from 'node:fs/promises';\n\nimport { compile } from '@mdx-js/mdx';\nimport remarkDirective from 'remark-directive';\nimport remarkReactDocgen from 'remark-mdx-react-docgen-typescript';\n\nconst { contents } = await compile(await readFile('example.mdx'), {\n  jsx: true,\n  remarkPlugins: [remarkDirective, remarkReactDocgen],\n});\nconsole.log(contents);\n```\n\nRoughly yields:\n\n```jsx\nexport default function MDXContent() {\n  return \u003cComponentDocs\n    propsData={[{\n      \"tags\": {},\n      \"filePath\": \"${cwd}/__fixtures__/Component.tsx\",\n      \"description\": \"\",\n      \"displayName\": \"Component\",\n      \"methods\": [],\n      \"props\": {...}\n      ...\n    }]}\n  /\u003e\n}\n```\n\nYou may use `@mdx-js/react` to define the component for `ComponentDocs` tag name:\n\n```jsx\nimport { MDXProvider } from '@mdx-js/react';\nimport ComponentDocs from './ComponentDocs';\n// ^-- Assumes an integration is used to compile MDX to JS, such as\n// `@mdx-js/esbuild`, `@mdx-js/loader`, `@mdx-js/node-loader`, or\n// `@mdx-js/rollup`, and that it is configured with\n// `options.providerImportSource: '@mdx-js/react'`.\n\n/** @type {import('mdx/types.js').MDXComponents} */\nconst components = {\n  ComponentDocs,\n};\n\nconsole.log(\n  \u003cMDXProvider components={components}\u003e\n    \u003cPost /\u003e\n  \u003c/MDXProvider\u003e\n);\n```\n\nThe file path is relative to the markdown file path. You can use `\u003crootDir\u003e` at the start of the path to import files relatively from the rootDir:\n\n```md\n::component-docs{file=\"\u003crootDir\u003e/Component.tsx\"}\n```\n\nYou may also specify additional attributes that will be forwarded as props to ComponentDocs component:\n\n```md\n::component-docs{file=\"./Component.tsx\" extraProp=\"value\"}\n```\n\n## Options\n\n- `componentName: string`: The name of tag/component this plugin will use in JSX. Defaults to `ComponentDocs`.\n- `directiveName: string`: The directive name. Defaults to `component-docs`.\n- `fileAttributeName: string`: The attribute name for file path. Defaults to `file`.\n- `rootDir: string`: Change what `\u003crootDir\u003e` refers to. Defaults to `process.cwd()`.\n- `reactDocGenOptions: object`: Options for [`react-docgen-typescript`](https://github.com/styleguidist/react-docgen-typescript?tab=readme-ov-file#options).\n\n## Testing\n\nAfter installing dependencies with `npm install`, the tests can be run with: `npm test`\n\n## License\n\nRippling People Center Inc.\n[Apache 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frippling%2Fremark-mdx-react-docgen-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frippling%2Fremark-mdx-react-docgen-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frippling%2Fremark-mdx-react-docgen-typescript/lists"}