React Display Name Utility

0.2.5 · maintenance · verified Sun Apr 19

This package provides a small, reusable utility function, `getDisplayName`, to extract the display name of a React component. It is particularly useful in patterns like Higher-Order Components (HOCs) for creating descriptive `displayName` properties for the wrapped components, aiding in debugging and developer tooling, especially with React DevTools. As of version 0.2.5, it ships with TypeScript definitions, enhancing type safety in projects utilizing TypeScript. The package has a low release cadence, with updates primarily focusing on maintenance, dependency upgrades, or minor feature enhancements like improved default return values. Its core functionality is stable and focused solely on robust component naming conventions.

Common errors

```
TypeError: (0 , react_display_name_1.getDisplayName) is not a function
```
cause Attempting to destructure `getDisplayName` as a named import when it is a default export in an ESM context.

fix Change your import statement from `import { getDisplayName } from 'react-display-name';` to `import getDisplayName from 'react-display-name';`.
```
TypeError: getDisplayName is not a function (when using require)
```
cause Incorrectly trying to access `getDisplayName` as a property of the required module in CommonJS, e.g., `require('react-display-name').getDisplayName`.

fix Assign the result of `require` directly: `const getDisplayName = require('react-display-name');` because it's a default export.
```
Component name showing as 'Unknown' or generic like 't' in dev tools
```
cause `getDisplayName` could not reliably infer the component's name, often due to anonymous functions, minification, or missing `displayName` properties.

fix Explicitly set the `static displayName = 'YourComponentName';` property on your React components. This provides a robust name that `getDisplayName` can always pick up.

Warnings

breaking The default string returned when a component's display name cannot be determined changed from 'Component' to 'Unknown'.
Fix: If your application relied on the exact 'Component' string for fallback logic, update your comparisons to 'Unknown' or ensure your components have explicit `displayName` properties.
gotcha Anonymous functional components or arrow functions without an assigned name or explicit `displayName` property will default to 'Unknown' (or 'Component' in older versions).
Fix: Always provide a `displayName` static property for your React components, especially when using HOCs or `React.memo`, to ensure consistent and debuggable naming across environments and build steps. Example: `MyComponent.displayName = 'MyComponent';`
gotcha Minification and obfuscation tools can sometimes mangle function names, potentially causing `getDisplayName` to return less descriptive or generic names if `displayName` is not explicitly set.
Fix: Always explicitly set the `displayName` static property on your React components to ensure predictable naming, regardless of build optimizations. This is particularly important for library authors.

Install

npm install react-display-name npm
yarn add react-display-name yarn
pnpm add react-display-name pnpm

Imports

getDisplayName
wrong:
```
import { getDisplayName } from 'react-display-name';
```
correct:
```
import getDisplayName from 'react-display-name';
```
The `getDisplayName` function is exported as the default export of the package.
getDisplayName (CommonJS)
```
const getDisplayName = require('react-display-name');
```
For CommonJS environments, the default export is directly assigned when requiring the module.
Type Inference
```
import getDisplayName from 'react-display-name';
// getDisplayName correctly infers types for React components.
```
Since v0.2.4, the package includes TypeScript definitions, allowing for proper type inference when using `getDisplayName` with `React.ComponentType` or similar.

Quickstart

Demonstrates how to use `getDisplayName` within a Higher-Order Component (HOC) to construct a descriptive `displayName` for debugging purposes.

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

const withLogger = (WrappedComponent) => {
  class WithLogger extends Component {
    static displayName = `WithLogger(${getDisplayName(WrappedComponent)})`;
    render() {
      console.log(`Rendering ${WithLogger.displayName}`);
      return <WrappedComponent {...this.props} />;
    }
  }
  return WithLogger;
};

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

const EnhancedMyComponent = withLogger(MyComponent);

// In a React application, you would render EnhancedMyComponent
// ReactDOM.render(<EnhancedMyComponent />, document.getElementById('root'));

console.log(getDisplayName(MyComponent)); // Expected: 'MyComponent'
console.log(getDisplayName(EnhancedMyComponent)); // Expected: 'WithLogger(MyComponent)'

view raw JSON →