babel-plugin-transform-react-display-name

What is babel-plugin-transform-react-display-name?

The babel-plugin-transform-react-display-name package is a Babel plugin that automatically adds display names to React components. This is particularly useful for debugging purposes, as it makes it easier to identify components in the React Developer Tools.

What are babel-plugin-transform-react-display-name's main functionalities?

Automatic Display Name Addition

This feature automatically adds a display name to React components, which helps in identifying the component in debugging tools. The plugin scans for React components and assigns a display name based on the variable or function name.

/* .babelrc configuration */
{
  "plugins": ["transform-react-display-name"]
}

/* Example React Component */
const MyComponent = () => <div>Hello World</div>;

/* After transformation */
const MyComponent = () => <div>Hello World</div>;
MyComponent.displayName = "MyComponent";

Other packages similar to babel-plugin-transform-react-display-name

babel-plugin-add-react-displayname

babel-plugin-add-react-displayname is a Babel plugin that also aims to add display names to React components. It provides similar functionality to babel-plugin-transform-react-display-name, ensuring that components are easily identifiable in debugging tools.

README

babel-plugin-transform-react-display-name

Add displayName to createReactClass (and React.createClass) calls

Example

In

var foo = React.createClass({}); // React <= 15
var bar = createReactClass({});  // React 16+

Out

var foo = React.createClass({
  displayName: "foo"
}); // React <= 15
var bar = createReactClass({
  displayName: "bar"
}); // React 16+

Installation

npm install --save-dev babel-plugin-transform-react-display-name

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-react-display-name"]
}

Via CLI

babel --plugins transform-react-display-name script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-display-name"]
});