react-display-name

npm install --save react-display-name

Get the displayName from a Component. This is a common pattern with React Higher Order Components (HoCs). This is a simple reusable utility to get the name of a component.

Usage:

import {expect} from 'chai';
import React, {Component} from 'react';
import getDisplayName from 'react-display-name';

const container = (WrappedComponent) => {
  class Container extends Component {
    static displayName = `Container(${getDisplayName(WrappedComponent)})`;
    render() {
      return (
        <WrappedComponent />
      );
    }
  }
  return Container;
}

class HelloWorld extends Component {
  render() {
    return (
      <div>Hello</div>
    );
  }
}

const HelloWorldPrime = container(HelloWorld);

expect(getDisplayName(HelloWorldPrime)).to.equal('Container(HelloWorld)');
expect(HelloWorldPrime.displayName).to.equal('Container(HelloWorld)');

Similar packages

Other packages similar to react-display-name

react-is

The react-is package provides a collection of React type-checking utilities, including the ability to determine if a component is a valid element type. While it does not directly provide display name functionality, it can be used to identify component types, which is a broader scope compared to react-display-name.

recompose

Recompose is a React utility belt for function components and higher-order components. It includes a utility called `getDisplayName` that serves a similar purpose to react-display-name, but Recompose offers a wider range of utilities for component composition and transformation.