{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-display-name"],"cli":null},"imports":["import getDisplayName from 'react-display-name';","const getDisplayName = require('react-display-name');","import getDisplayName from 'react-display-name';\n// getDisplayName correctly infers types for React components."],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}