@ice/remark-react-docgen-docusaurus

A remark plugin(based on react-docgen) to automatic generate react component docs in Docusaurus or ICE PKG

Install

$ npm i @ice/remark-react-docgen-docusaurus --save-dev

Usage

First, we need to add the plugin to the config:

If you use it in Docusaurus, add the plugin to the docusaurus.config.js:

// docusaurus.config.js
const remarkReactDocgen = require('@ice/remark-react-docgen-docusaurus');

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [remarkReactDocgen],
        },
      },
    ],
  ],
}

If you use it in ICE PKG, add the plugin to the build.config.mts:

// build.config.mts
import { defineConfig } from '@ice/pkg';

export default defineConfig({
  plugins: [
    [
      '@ice/pkg-plugin-docusaurus',
      {
        remarkPlugins: [
          "require('@ice/remark-react-docgen-docusaurus')",
        ],
      },
    ],
  ],
});

Add the <ReactDocgenProps /> component to the markdown:

## API

<ReactDocgenProps path="../src/components/Button/index.tsx"></ReactDocgenProps>

the path is the path of the React component

Finally, you can run the command npm run start, you can see the following: