1. react-docgen-displayname-handler
A handler for react-docgen that tries to infer the displayName of a component
react-docgen-displayname-handler
Package: react-docgen-displayname-handler
Created by: nerdlabs
Last modified: Sat, 25 Jun 2022 20:17:14 GMT
Version: 3.0.2
License: MIT
Downloads: 315,161
Repository: https://github.com/nerdlabs/react-docgen-displayname-handler

Install

npm install react-docgen-displayname-handler
yarn add react-docgen-displayname-handler

react-docgen-displayname-handler Build Status Latest published version

A handler for react-docgen that tries to infer the displayName of a component.

Rationale

react-docgen is a CLI and API toolbox
to help extract information from 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

 npm install --save react-docgen-displayname-handler

Usage

Unfortunately there is currently no easy way to use custom handlers with the
react-docgen CLI.

Discussions and Ideas about how to make this easier are happening in the
react-docgen issue discussions.

If you want to use this module programmatically check out the react-docgen API docs for more information about
the react-docgen API.
Below is a small example that demonstrates how to
integrate react-docgen-displayname-handler.

 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:

 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.

 import React from 'react';
export default class X extends React.Component {
  static displayName = 'MyComponent';
  render() {
    return <div />;
  }
}
 {
  "displayName": "MyComponent",
  "props": {...}
}
 import React from 'react';
export default class MyComponent extends React.Component {
  render() {
    return <div />;
  }
}
 {
  "displayName": "MyComponent",
  "props": {...}
}

For more information about the data format see the react-docgen readme

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code