You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

babel-plugin-add-react-displayname

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-add-react-displayname

Automatically add displayName to all your components


Version published
Maintainers
1
Created

Package description

What is babel-plugin-add-react-displayname?

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.

What are babel-plugin-add-react-displayname's main functionalities?

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';

Other packages similar to babel-plugin-add-react-displayname

Readme

Source

babel-plugin-add-react-displayname

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:

  • ES6-classes style components
  • Stateless components that return JSX

Installation

Simply add add-react-displayname to your .babelrc file:

{
    "plugins": ["add-react-displayname"]
}

Troubleshooting

Doesn't work for decorated classes

If you are using the transform-decorators-legacy plugin, make sure it's placed after this plugin in your plugin list.

Testing

npm test

FAQs

Package last updated on 30 Jan 2018

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc