Registry / web-framework / react-display-name

react-display-name

library0.2.5jsnpmunverified

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.

web-framework

npm install react-display-name

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DISPLAY-NAME

react-display-name

web-frameworkjavascriptv0.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

getDisplayName

✓ import getDisplayName from 'react-display-name';

✗ 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.

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)'

Debug

Known issues

breakingThe 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.

affects: >=0.2.3

gotchaAnonymous 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';`

affects: all

gotchaMinification 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.

affects: all

Errors

Common errors & fixes

TypeError: (0 , react_display_name_1.getDisplayName) is not a function

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)

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

`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.

Upgrade

Version history

0.2.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jurassix/react-display-name ↗

packagehttps://www.npmjs.com/package/react-display-name ↗