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+
23A handler for react-docgen that tries to infer the displayName of a component.
34
45## Rationale
6+
57[ react-docgen] ( https://github.com/reactjs/react-docgen ) is a CLI and API toolbox
68to help extract information from [ React] ( http://facebook.github.io/react/ )
79components and generate documentation from it.
@@ -10,6 +12,7 @@ components and generate documentation from it.
1012used to infer the displayName for a given component.
1113
1214The handler tries to infer the displayName from the following sources:
15+
1316- a static ` displayName ` property on the object / class
1417- the name of the function or class declaration/expression
1518- 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:
1821- if everything fails the displayName is set to ` UnknownComponent `
1922
2023## Installation
24+
2125Install ` react-docgen-displayname-handler ` from [ npm] ( https://www.npmjs.com/package/react-docgen-displayname-handler )
2226
2327``` shell
2428npm install --save react-docgen-displayname-handler
2529```
2630
2731## Usage
32+
2833Unfortunately there is currently no easy way to use custom handlers with the
2934[ react-docgen CLI] ( https://github.com/reactjs/react-docgen#cli ) .
3035
@@ -43,27 +48,31 @@ const resolver = reactDocs.resolver.findExportedComponentDefinition;
4348const handlers = reactDocs .handlers .concat (displayNameHandler);
4449const documentation = reactDocs .parse (src, resolver, handlers);
4550```
51+
4652If you want to use the filepath for displayName resolution too, check out the
4753following example:
54+
4855``` javascript
4956import reactDocs from ' react-docgen' ;
5057import { createDisplayNameHandler } from ' react-docgen-displayname-handler' ;
5158const resolver = reactDocs .resolver .findExportedComponentDefinition ;
5259const handlers = reactDocs .handlers .concat (createDisplayNameHandler (filePath));
5360const documentation = reactDocs .parse (src, resolver, handlers);
5461```
62+
5563In order to use the file path too, you need to import the named export
5664` createDisplayNameHandler ` which takes as an argument the file path and returns
5765a handler function that can be passed to react-docgen.
5866
5967## Examples
68+
6069When using this custom handler with ` react-docgen ` it will try to find the
6170displayName of the component as outlined above.
6271
6372``` javascript
6473import React from ' react' ;
65- export default class X {
66- static displayName = ' MyComponent'
74+ export default class X extends React . Component {
75+ static displayName = ' MyComponent' ;
6776 render () {
6877 return < div / > ;
6978 }
@@ -79,7 +88,7 @@ export default class X {
7988
8089``` javascript
8190import React from ' react' ;
82- export default class MyComponent {
91+ export default class MyComponent extends React . Component {
8392 render () {
8493 return < div / > ;
8594 }
0 commit comments