Skip to content

Commit d39fad0

Browse files
committed
docs: update documentation examples to work with react-docgen@5
1 parent c986d19 commit d39fad0

File tree

1 file changed

+13
-4
lines changed

1 file changed

+13
-4
lines changed

README.md

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
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+
23
A 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
68
to help extract information from [React](http://facebook.github.io/react/)
79
components and generate documentation from it.
@@ -10,6 +12,7 @@ components and generate documentation from it.
1012
used to infer the displayName for a given component.
1113

1214
The 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+
2125
Install `react-docgen-displayname-handler` from [npm](https://www.npmjs.com/package/react-docgen-displayname-handler)
2226

2327
```shell
2428
npm install --save react-docgen-displayname-handler
2529
```
2630

2731
## Usage
32+
2833
Unfortunately 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;
4348
const handlers = reactDocs.handlers.concat(displayNameHandler);
4449
const documentation = reactDocs.parse(src, resolver, handlers);
4550
```
51+
4652
If you want to use the filepath for displayName resolution too, check out the
4753
following example:
54+
4855
```javascript
4956
import reactDocs from 'react-docgen';
5057
import { createDisplayNameHandler } from 'react-docgen-displayname-handler';
5158
const resolver = reactDocs.resolver.findExportedComponentDefinition;
5259
const handlers = reactDocs.handlers.concat(createDisplayNameHandler(filePath));
5360
const documentation = reactDocs.parse(src, resolver, handlers);
5461
```
62+
5563
In 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
5765
a handler function that can be passed to react-docgen.
5866

5967
## Examples
68+
6069
When using this custom handler with `react-docgen` it will try to find the
6170
displayName of the component as outlined above.
6271

6372
```javascript
6473
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';
6776
render() {
6877
return <div />;
6978
}
@@ -79,7 +88,7 @@ export default class X {
7988

8089
```javascript
8190
import 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

Comments
 (0)