1
- # react-docgen-displayname-handler [ ![ Build Status] ( https://travis-ci.org/nerdlabs/react-docgen-displayname-handler.svg?branch=master )] ( https://travis-ci.org/nerdlabs/react-docgen-displayname-handler )
1
+ # react-docgen-displayname-handler ![ Build Status] ( https://img.shields.io/travis/nerdlabs/react-docgen-displayname-handler/master ) ![ Latest published version] ( https://img.shields.io/npm/v/react-docgen-displayname-handler )
2
+
2
3
A handler for react-docgen that tries to infer the displayName of a component.
3
4
4
5
## Rationale
6
+
5
7
[ react-docgen] ( https://github.com/reactjs/react-docgen ) is a CLI and API toolbox
6
8
to help extract information from [ React] ( http://facebook.github.io/react/ )
7
9
components and generate documentation from it.
@@ -10,6 +12,7 @@ components and generate documentation from it.
10
12
used to infer the displayName for a given component.
11
13
12
14
The handler tries to infer the displayName from the following sources:
15
+
13
16
- a static ` displayName ` property on the object / class
14
17
- the name of the function or class declaration/expression
15
18
- the name of the variable the component is assigned to
@@ -18,13 +21,15 @@ The handler tries to infer the displayName from the following sources:
18
21
- if everything fails the displayName is set to ` UnknownComponent `
19
22
20
23
## Installation
24
+
21
25
Install ` react-docgen-displayname-handler ` from [ npm] ( https://www.npmjs.com/package/react-docgen-displayname-handler )
22
26
23
27
``` shell
24
28
npm install --save react-docgen-displayname-handler
25
29
```
26
30
27
31
## Usage
32
+
28
33
Unfortunately there is currently no easy way to use custom handlers with the
29
34
[ react-docgen CLI] ( https://github.com/reactjs/react-docgen#cli ) .
30
35
@@ -43,27 +48,31 @@ const resolver = reactDocs.resolver.findExportedComponentDefinition;
43
48
const handlers = reactDocs .handlers .concat (displayNameHandler);
44
49
const documentation = reactDocs .parse (src, resolver, handlers);
45
50
```
51
+
46
52
If you want to use the filepath for displayName resolution too, check out the
47
53
following example:
54
+
48
55
``` javascript
49
56
import reactDocs from ' react-docgen' ;
50
57
import { createDisplayNameHandler } from ' react-docgen-displayname-handler' ;
51
58
const resolver = reactDocs .resolver .findExportedComponentDefinition ;
52
59
const handlers = reactDocs .handlers .concat (createDisplayNameHandler (filePath));
53
60
const documentation = reactDocs .parse (src, resolver, handlers);
54
61
```
62
+
55
63
In order to use the file path too, you need to import the named export
56
64
` createDisplayNameHandler ` which takes as an argument the file path and returns
57
65
a handler function that can be passed to react-docgen.
58
66
59
67
## Examples
68
+
60
69
When using this custom handler with ` react-docgen ` it will try to find the
61
70
displayName of the component as outlined above.
62
71
63
72
``` javascript
64
73
import React from ' react' ;
65
- export default class X {
66
- static displayName = ' MyComponent'
74
+ export default class X extends React . Component {
75
+ static displayName = ' MyComponent' ;
67
76
render () {
68
77
return < div / > ;
69
78
}
@@ -79,7 +88,7 @@ export default class X {
79
88
80
89
``` javascript
81
90
import React from ' react' ;
82
- export default class MyComponent {
91
+ export default class MyComponent extends React . Component {
83
92
render () {
84
93
return < div / > ;
85
94
}
0 commit comments