react-display-name

react-display-name is a minimal, zero-dependency utility that resolves the human-readable name of a React component. Given a component, it returns its explicit displayName, falls back to the function/class name, handles string (host) components, and returns ‘Unknown’ when nothing is available.

It exists to solve a small but recurring problem: when you wrap components in higher-order components (HoCs), you want the wrapper’s displayName to reflect the component it wraps — for example Container(HelloWorld) — so React DevTools and error messages stay readable. This library encapsulates that lookup logic in one dependable, well-tested function.

What You Get

• A single getDisplayName(Component) function with predictable fallback order
• Correct handling of class/function components, host (string) components, and unnamed components
• TypeScript type definitions bundled alongside the implementation
• Zero runtime dependencies and a negligible bundle footprint
• A reusable replacement for hand-rolled displayName lookups in HoCs

Common Use Cases

• Naming higher-order components so DevTools shows Wrapper(Inner)
• Building debug-friendly wrappers and decorators around components
• Generating consistent component labels for logging or analytics
• Avoiding duplicated displayName-resolution logic across a codebase

Under The Hood

Architecture - The entire library is a single pure function in src/getDisplayName.js. It returns Component.displayName if set, otherwise Component.name, otherwise the component itself when it is a non-empty string (React host components), and ‘Unknown’ as a last resort. There is no state, no side effects, and no external calls.

Tech Stack - Authored in modern JavaScript with an ES module default export, transpiled via Babel to lib for publishing. A hand-written getDisplayName.d.ts provides TypeScript types. It has no runtime dependencies.

Code Quality - Despite its size the project is well tested (Mocha/Chai historically) and documented with a clear usage example in the README. The fallback ordering is explicit and easy to audit, and the function’s purity makes it trivially reliable.

API Design - The API is about as ergonomic as it gets: import the default export and call it with a component. The single-responsibility design and sensible fallback chain mean it behaves correctly across the many shapes a React component can take, with no configuration required.