babel-plugin-add-react-displayname
Advanced tools
Automatically add displayName to all your components
The babel-plugin-add-react-displayname npm package is a Babel plugin that automatically adds a displayName to React components for easier debugging in development tools. This is particularly useful for components defined as anonymous functions, which otherwise would not have a displayName set, making them appear as 'Unknown' in React Developer Tools.
Automatic displayName addition
This feature automatically adds a displayName property to React components defined as anonymous functions. This helps in identifying components in debugging tools.
const MyComponent = () => <div>Hello</div>;
// Transformed by babel-plugin-add-react-displayname
// MyComponent.displayName = 'MyComponent';Similar to babel-plugin-add-react-displayname, this package also adds display names to React components. However, it supports a broader range of component definitions and is more widely used in the community.
This package provides a utility to manually assign display names to React components. Unlike babel-plugin-add-react-displayname, which automates the process during the build step, react-display-name requires manual intervention in the code.
Automatically detects and sets displayName for React components. This is useful for having real component names show up in production builds of React apps.
Babel already does this for React.createClass style components, this adds support for the two other kinds of component definitions:
Simply add add-react-displayname to your .babelrc file:
{
"plugins": ["add-react-displayname"]
}
If you are using the transform-decorators-legacy plugin, make sure it's placed after this plugin in your plugin list.
npm test
FAQs
Automatically add displayName to all your components
The npm package babel-plugin-add-react-displayname receives a total of 1,181,622 weekly downloads. As such, babel-plugin-add-react-displayname popularity was classified as popular.
We found that babel-plugin-add-react-displayname demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.