babel-plugin-add-react-displayname
Advanced tools
Package description
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.
Readme
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 2,660,147 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.