@@ -8,8 +8,8 @@ A Docusaurus 2.x plugin that help generate and consume auto-generated docs from
88Grab from NPM and install along with ` react-docgen-typescript ` :
99
1010``` sh
11- npm i docusaurus-plugin-react-docgen-typescript react-docgen-typescript # or
12- yarn add docusaurus-plugin-react-docgen-typescript react-docgen-typescript
11+ npm i docusaurus-plugin-react-docgen-typescript react-docgen-typescript@2 # or
12+ yarn add docusaurus-plugin-react-docgen-typescript react-docgen-typescript@2
1313```
1414
1515## Usage
@@ -19,29 +19,29 @@ with full glob support :+1:.
1919
2020``` js
2121module .exports = {
22- // ...
23- plugins: [
24- [
25- ' docusaurus-plugin-react-docgen-typescript' ,
26- {
27- // pass in a single string or an array of strings
28- src: [' path/to/**/*.tsx' , ' !path/to/**/*test.*' ],
29- global: true ,
30- parserOptions: {
31- // pass parserOptions to react-docgen-typescript
32- // here is a good starting point which filters out all
33- // types from react
34- propFilter : (prop , component ) => {
35- if (prop .parent ) {
36- return ! prop .parent .fileName .includes (' @types/react' );
37- }
38-
39- return true ;
40- },
41- },
42- },
43- ],
22+ // ...
23+ plugins: [
24+ [
25+ ' docusaurus-plugin-react-docgen-typescript' ,
26+ {
27+ // pass in a single string or an array of strings
28+ src: [' path/to/**/*.tsx' , ' !path/to/**/*test.*' ],
29+ global: true ,
30+ parserOptions: {
31+ // pass parserOptions to react-docgen-typescript
32+ // here is a good starting point which filters out all
33+ // types from react
34+ propFilter : (prop , component ) => {
35+ if (prop .parent ) {
36+ return ! prop .parent .fileName .includes (' @types/react' );
37+ }
38+
39+ return true ;
40+ },
41+ },
42+ },
4443 ],
44+ ],
4545};
4646```
4747
@@ -58,51 +58,46 @@ Using the default settings, annotations are stored inside of the `.docusaurus` d
5858Most of the time props will want to be shown as API information to a particular component. For
5959convenience, we can use a simple hook from this package to dynamically import ` .json ` files:
6060
61- ``` jsx
62- import * as React from ' react' ;
63- import { useDynamicImport } from ' docusaurus-plugin-react-docgen-typescript/pkg/dist-src/hooks/useDynamicImport' ;
61+ ``` tsx
62+ import { useDynamicImport } from ' docusaurus-plugin-react-docgen-typescript/dist/esm/hooks' ;
6463
6564export const PropTable = ({ name }) => {
66- const props = useDynamicImport (name);
67-
68- if (! props) {
69- return null ;
70- }
71-
72- return (
73- < table>
74- < thead>
75- < tr>
76- < th> Name< / th>
77- < th> Type< / th>
78- < th> Default Value< / th>
79- < th> Required< / th>
80- < th> Description< / th>
81- < / tr>
82- < / thead>
83- < tbody>
84- {Object .keys (props).map (key => {
85- return (
86- < tr key= {key}>
87- < td>
88- < code> {key}< / code>
89- < / td>
90- < td>
91- < code> {props[key].type ? .name }< / code>
92- < / td>
93- < td>
94- {props[key].defaultValue && (
95- < code> {props[key].defaultValue .value }< / code>
96- )}
97- < / td>
98- < td> {props[key].required ? ' Yes' : ' No' }< / td>
99- < td> {props[key].description }< / td>
100- < / tr>
101- );
102- })}
103- < / tbody>
104- < / table>
105- );
65+ const props = useDynamicImport (name );
66+
67+ if (! props ) {
68+ return null ;
69+ }
70+
71+ return (
72+ <table >
73+ <thead >
74+ <tr >
75+ <th >Name</th >
76+ <th >Type</th >
77+ <th >Default Value</th >
78+ <th >Required</th >
79+ <th >Description</th >
80+ </tr >
81+ </thead >
82+ <tbody >
83+ { Object .keys (props ).map (key => {
84+ return (
85+ <tr key = { key } >
86+ <td >
87+ <code >{ key } </code >
88+ </td >
89+ <td >
90+ <code >{ props [key ].type ?.name } </code >
91+ </td >
92+ <td >{ props [key ].defaultValue && <code >{ props [key ].defaultValue .value } </code >} </td >
93+ <td >{ props [key ].required ? ' Yes' : ' No' } </td >
94+ <td >{ props [key ].description } </td >
95+ </tr >
96+ );
97+ })}
98+ </tbody >
99+ </table >
100+ );
106101};
107102```
108103
0 commit comments