react-docgen-displayname-handler

    3.0.2 • Public • Published

    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

    Install

    npm i react-docgen-displayname-handler

    DownloadsWeekly Downloads

    118,426

    Version

    3.0.2

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • nerdlabs