Socket
Socket
Sign inDemoInstall

react-docgen-displayname-handler

Package Overview
Dependencies
115
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-docgen-displayname-handler

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


Version published
Maintainers
1
Weekly downloads
67,331
decreased by-11.28%

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 17 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc