This plugin add displayName
to various form of react component definition, including ES6 class, createReactClass
calls, stateless functions (both function
and arrow).
npm install --save-dev babel-plugin-react-add-display-name
.babelrc
{
"plugins": ["react-add-display-name"]
}
$ babel --plugins react-add-display-name script.js
require("babel-core").transform("code", {
plugins: ["react-add-display-name"]
});
-
For
createReactClass
orcreateClass
calls, the variable name becomesdisplayName
:let Foo = createReactClass({ // ... });
Becomes
let Foo = createReactClass({ displayName: 'Foo', // ... });
-
For named classes, class name becomes
displayName
, all classes with arender
method whose function body contains jsx expression are recgonized as component class:class Foo extends Component { render() { return <div></div>; } } let Alice = class Bob extends Component { render() { return <div></div>; } }
Becomes
class Foo extends Component { render() { return <div></div>; } } Foo.displayName = 'Foo'; let Alice = class Bob extends Component { render() { return <div></div>; } } Alice.displayName = 'Bob';
-
For anonymouse classes, the variable name becomes
displayName
:let Foo = class extends Component { render() { return <div></div>; } }
Becomes
let Foo = class extends Component { render() { return <div></div>; } } Foo.displayName = 'Foo';
-
For stateless component defined via named functions (both function declarations and expressions), the function name becomes
displayName
:function Foo() { return <div></div>; } let Alice = function Bob() { return <div></div>; };
Becomes
function Foo() { return <div></div>; } Foo.displayName = 'Foo'; let Alice = function Bob() { return <div></div>; }; Alice.displayName = 'Bob';
-
For anonymous functions or arrow functions, the variable name becomes
displayName
:let Foo = function () { return <div></div>; }; let Bar = () => <div></div>;
Becomes
let Foo = function () { return <div></div>; }; Foo.displayName = 'Foo'; let Bar = () => <div></div>; Bar.displayName = 'Bar';
-
For other cases where there is no explicit hint of
displayName
, this plugin will not adddisplayName
to component.