# react-docgen-displayname-handler
> A handler for react-docgen that tries to infer the displayName of a component
Latest version **3.0.2** (published 2020-09-17) · MIT license · 69.1K weekly downloads
## Install
```sh
npm install react-docgen-displayname-handler
pnpm add react-docgen-displayname-handler
yarn add react-docgen-displayname-handler
bun add react-docgen-displayname-handler
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.2 |
| Published | 2020-09-17 |
| First published | 2016-09-09 |
| Weekly downloads | 69.1K |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.10.0 |
| Dependencies | 1 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | nerdlabs |
| Maintainers | nerdlabs |
| Keywords | react, documentation-generation, react-docgen |
## Links
- npm: https://www.npmjs.com/package/react-docgen-displayname-handler
- Repository: https://github.com/nerdlabs/react-docgen-displayname-handler
- Homepage: https://github.com/nerdlabs/react-docgen-displayname-handler#readme
- Issues: https://github.com/nerdlabs/react-docgen-displayname-handler/issues
- npm.io page: https://npm.io/package/react-docgen-displayname-handler
## Dependencies (1)
- [ast-types](https://npm.io/package/ast-types.md) 0.14.2
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.0.2 (latest) — 2020-09-17
- 3.0.1 — 2020-04-08
- 3.0.0 — 2019-12-15
- 2.1.3 — 2019-08-26
- 2.1.2 — 2019-08-25
- 2.1.1 — 2018-08-21
- 2.1.0 — 2018-06-06
- 2.0.0 — 2018-06-06
- 1.0.1 — 2017-09-04
- 1.0.0 — 2016-09-09
## README
# react-docgen-displayname-handler [](https://travis-ci.org/nerdlabs/react-docgen-displayname-handler/branches) [](https://www.npmjs.com/package/react-docgen-displayname-handler)
A handler for react-docgen that tries to infer the displayName of a component.
## Rationale
[react-docgen](https://github.com/reactjs/react-docgen) is a CLI and API toolbox
to help extract information from [React](http://facebook.github.io/react/)
components and generate documentation from it.
`react-docgen-displayname-handler` is a custom handler for `react-docgen` and can be
used to infer the displayName for a given component.
The handler tries to infer the displayName from the following sources:
- a static `displayName` property on the object / class
- the name of the function or class declaration/expression
- the name of the variable the component is assigned to
- (optional) the file name (if it is not "index")
- (optional) the last part of the file path (directory name)
- if everything fails the displayName is set to `UnknownComponent`
## Installation
Install `react-docgen-displayname-handler` from [npm](https://www.npmjs.com/package/react-docgen-displayname-handler)
```shell
npm install --save react-docgen-displayname-handler
```
## Usage
Unfortunately there is currently no easy way to use custom handlers with the
[react-docgen CLI](https://github.com/reactjs/react-docgen#cli).
Discussions and Ideas about how to make this easier are happening in the
[react-docgen issue discussions](https://github.com/reactjs/react-docgen/issues/115).
If you want to use this module programmatically check out the [react-docgen API docs](https://github.com/reactjs/react-docgen#api) for more information about
the `react-docgen` API.
Below is a small example that demonstrates how to
integrate `react-docgen-displayname-handler`.
```javascript
import reactDocs from 'react-docgen';
import displayNameHandler from 'react-docgen-displayname-handler';
const resolver = reactDocs.resolver.findExportedComponentDefinition;
const handlers = reactDocs.handlers.concat(displayNameHandler);
const documentation = reactDocs.parse(src, resolver, handlers);
```
If you want to use the filepath for displayName resolution too, check out the
following example:
```javascript
import reactDocs from 'react-docgen';
import { createDisplayNameHandler } from 'react-docgen-displayname-handler';
const resolver = reactDocs.resolver.findExportedComponentDefinition;
const handlers = reactDocs.handlers.concat(createDisplayNameHandler(filePath));
const documentation = reactDocs.parse(src, resolver, handlers);
```
In order to use the file path too, you need to import the named export
`createDisplayNameHandler` which takes as an argument the file path and returns
a handler function that can be passed to react-docgen.
## Examples
When using this custom handler with `react-docgen` it will try to find the
displayName of the component as outlined above.
```javascript
import React from 'react';
export default class X extends React.Component {
static displayName = 'MyComponent';
render() {
return ;
}
}
```
```json
{
"displayName": "MyComponent",
"props": {...}
}
```
```javascript
import React from 'react';
export default class MyComponent extends React.Component {
render() {
return ;
}
}
```
```json
{
"displayName": "MyComponent",
"props": {...}
}
```
For more information about the data format see the [react-docgen readme](https://github.com/reactjs/react-docgen#result-data-structure)
---
_Source: https://npm.io/package/react-docgen-displayname-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._