@@ -13,26 +13,26 @@ npm i --save-dev docusaurus-plugin-react-docgen-typescript react-docgen-typescri
1313
1414## Usage
1515
16- Inside your ` docusaurus.config.js ` add to the ` plugins ` field and configure with the ` src ` option
17- with full glob support :+1 : .
16+ Inside your ` docusaurus.config.js ` add to the ` plugins ` field and configure with
17+ the ` src ` option with full glob support :+1 : .
1818
1919``` js
2020module .exports = {
2121 // ...
2222 plugins: [
2323 [
24- ' docusaurus-plugin-react-docgen-typescript'
24+ " docusaurus-plugin-react-docgen-typescript"
2525 /** @type {import('docusaurus-plugin-react-docgen-typescript').Options} */
2626 {
2727 // pass in a single string or an array of strings
28- src: [' path/to/**/*.tsx' , ' !path/to/**/*test.*'
28+ src: [" path/to/**/*.tsx" , " !path/to/**/*test.*"
2929 parserOptions: {
3030 // pass parserOptions to react-docgen-typescript
3131 // here is a good starting point which filters out all
3232 // types from react
3333 propFilter : (prop , component ) => {
3434 if (prop .parent ) {
35- return ! prop .parent .fileName .includes (' @types/react'
35+ return ! prop .parent .fileName .includes (" @types/react"
3636 }
3737
3838 return true ;
@@ -44,11 +44,11 @@ module.exports = {
4444};
4545```
4646
47- Any pattern supported by [ ` fast-glob ` ] ( https://github.com/mrmlnc/fast-glob ) is allowed here
48- (including negations).
47+ Any pattern supported by [ ` fast-glob ` ] ( https://github.com/mrmlnc/fast-glob ) is
48+ allowed here (including negations).
4949
50- ` src ` paths are relative to the location of your ` docusaurus.config.js ` . For example, if you
51- had a directory structure like:
50+ ` src ` paths are relative to the location of your ` docusaurus.config.js ` . For
51+ example, if you had a directory structure like:
5252
5353```
5454.
@@ -69,24 +69,29 @@ had a directory structure like:
6969└── yarn.lock
7070```
7171
72- Then to document all of your JSX components in your ` src/ ` directory, you would use this path:
73- ` ../src/**/*.jsx ` .
72+ Then to document all of your JSX components in your ` src/ ` directory, you would
73+ use this path: ` ../src/**/*.jsx ` .
7474
7575## Reading Annotations
7676
77- Using the default settings, annotations are stored inside of the ` .docusaurus ` directory. The
78- ` @docgen ` alias is set to ensure stable access to these files.
77+ Using the default settings, annotations are stored inside of the ` .docusaurus `
78+ directory. The ` @docgen ` alias is set to ensure stable access to these files.
7979
8080### Build a Prop Table
8181
82- Most of the time props will want to be shown as API information to a particular component. For
83- convenience, we can use a simple hook from this package to dynamically import ` .json ` files:
82+ Most of the time props will want to be shown as API information to a particular
83+ component. For convenience, we can use a simple hook from this package to
84+ dynamically import ` .json ` files:
8485
8586``` tsx
86- import { useDynamicImport } from ' docusaurus-plugin-react-docgen-typescript/dist/esm/hooks'
87+ import { useDynamicImport } from " docusaurus-plugin-react-docgen-typescript/useDynamicImport"
88+
89+ type MyProps = {
90+ /* ... */
91+ };
8792
8893export const = ({ name }) => {
89- const = useDynamicImport (name );
94+ const = useDynamicImport < MyProps > (name );
9095
9196 if (! props ) {
9297 return null ;
@@ -104,7 +109,7 @@ export const PropTable = ({ name }) => {
104109 </tr >
105110 </thead >
106111 <tbody >
107- { Object .keys (props ).map (key => {
112+ { Object .keys (props ).map (( key ) => {
108113 return (
109114 <tr key = { key } >
110115 <td >
@@ -113,8 +118,12 @@ export const PropTable = ({ name }) => {
113118 <td >
114119 <code >{ props [key ].type ?.name } </code >
115120 </td >
116- <td >{ props [key ].defaultValue && <code >{ props [key ].defaultValue .value } </code >} </td >
117- <td >{ props [key ].required ? ' Yes' : ' No' } </td >
121+ <td >
122+ { props [key ].defaultValue && (
123+ <code >{ props [key ].defaultValue .value } </code >
124+ )}
125+ </td >
126+ <td >{ props [key ].required ? " Yes" : " No" } </td >
118127 <td >{ props [key ].description } </td >
119128 </tr >
120129 );
@@ -125,7 +134,8 @@ export const PropTable = ({ name }) => {
125134};
126135```
127136
128- ** N.b.** If you use ` global: true ` , then you must use the [ ` useGlobalData ` hook] ( https://docusaurus.io/docs/docusaurus-core#useGlobalData )
137+ ** N.b.** If you use ` global: true ` , then you must use the
138+ [ ` useGlobalData ` hook] ( https://docusaurus.io/docs/docusaurus-core#useGlobalData )
129139to access the docgen data. You cannot use ` useDynamicImport ` .
130140
131141## Options
0 commit comments