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
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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.