Example implementation

[rhenspeakap]

Hi, do you have an existing example on how to implement this? I'm having some hard time to integrate this in my Docusaurus project. Any help is much appreciated.

[atomicpages]

👋 what kind of issues are you seeing? Integration should be as simple as:

module.exports = {
  // ...
  plugins: [
    [
      "docusaurus-plugin-react-docgen-typescript",
      {
        // pass in a single string or an array of strings
        src: ["path/to/**/*.tsx", "!path/to/**/*test.*"],
        global: true,
        parserOptions: {
          // pass parserOptions to react-docgen-typescript
          // here is a good starting point which filters out all
          // types from react
          propFilter: (prop, component) => {
            if (prop.parent) {
              return !prop.parent.fileName.includes("@types/react");
            }

            return true;
          },
        },
      },
    ],
  ],
};

You can verify the types are built in the.docusaurus directory by looking for docusaurus-plugin-react-docgen-typescript

[rhenspeakap]

so just import from .docusaurs the generated json, is that correct?

[atomicpages]

Ah, to use the generated JSON you can use PropTable from this package, or import it like this file does here:

https://github.com/atomicpages/docusaurus-plugin-react-docgen-typescript/blob/3278ff2dac5d23bcd39ef23575bbf0dea94eccc3/src/hooks/useDynamicImport.ts#L10

See the README for mode details on how to BYO prop table

[rhenspeakap]

@atomicpages okay, great. Thanks for your help!