{"id":11689,"library":"react-display-name","title":"React Display Name Utility","description":"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.","status":"maintenance","version":"0.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/jurassix/react-display-name","tags":["javascript","react","redux","getDisplayName","typescript"],"install":[{"cmd":"npm install react-display-name","lang":"bash","label":"npm"},{"cmd":"yarn add react-display-name","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-display-name","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `getDisplayName` function is exported as the default export of the package.","wrong":"import { getDisplayName } from 'react-display-name';","symbol":"getDisplayName","correct":"import getDisplayName from 'react-display-name';"},{"note":"For CommonJS environments, the default export is directly assigned when requiring the module.","symbol":"getDisplayName (CommonJS)","correct":"const getDisplayName = require('react-display-name');"},{"note":"Since v0.2.4, the package includes TypeScript definitions, allowing for proper type inference when using `getDisplayName` with `React.ComponentType` or similar.","symbol":"Type Inference","correct":"import getDisplayName from 'react-display-name';\n// getDisplayName correctly infers types for React components."}],"quickstart":{"code":"import React, { Component } from 'react';\nimport getDisplayName from 'react-display-name';\n\nconst withLogger = (WrappedComponent) => {\n  class WithLogger extends Component {\n    static displayName = `WithLogger(${getDisplayName(WrappedComponent)})`;\n    render() {\n      console.log(`Rendering ${WithLogger.displayName}`);\n      return <WrappedComponent {...this.props} />;\n    }\n  }\n  return WithLogger;\n};\n\nclass MyComponent extends Component {\n  render() {\n    return <div>Hello, World!</div>;\n  }\n}\n\nconst EnhancedMyComponent = withLogger(MyComponent);\n\n// In a React application, you would render EnhancedMyComponent\n// ReactDOM.render(<EnhancedMyComponent />, document.getElementById('root'));\n\nconsole.log(getDisplayName(MyComponent)); // Expected: 'MyComponent'\nconsole.log(getDisplayName(EnhancedMyComponent)); // Expected: 'WithLogger(MyComponent)'\n","lang":"typescript","description":"Demonstrates how to use `getDisplayName` within a Higher-Order Component (HOC) to construct a descriptive `displayName` for debugging purposes."},"warnings":[{"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.","message":"The default string returned when a component's display name cannot be determined changed from 'Component' to 'Unknown'.","severity":"breaking","affected_versions":">=0.2.3"},{"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';`","message":"Anonymous functional components or arrow functions without an assigned name or explicit `displayName` property will default to 'Unknown' (or 'Component' in older versions).","severity":"gotcha","affected_versions":"all"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import { getDisplayName } from 'react-display-name';` to `import getDisplayName from 'react-display-name';`.","cause":"Attempting to destructure `getDisplayName` as a named import when it is a default export in an ESM context.","error":"TypeError: (0 , react_display_name_1.getDisplayName) is not a function"},{"fix":"Assign the result of `require` directly: `const getDisplayName = require('react-display-name');` because it's a default export.","cause":"Incorrectly trying to access `getDisplayName` as a property of the required module in CommonJS, e.g., `require('react-display-name').getDisplayName`.","error":"TypeError: getDisplayName is not a function (when using require)"},{"fix":"Explicitly set the `static displayName = 'YourComponentName';` property on your React components. This provides a robust name that `getDisplayName` can always pick up.","cause":"`getDisplayName` could not reliably infer the component's name, often due to anonymous functions, minification, or missing `displayName` properties.","error":"Component name showing as 'Unknown' or generic like 't' in dev tools"}],"ecosystem":"npm"}