babel-plugin-react-add-display-name

This plugin add displayName to various form of react component definition, including ES6 class, createReactClass calls, stateless functions (both function and arrow).

Install

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

Usage

Via `.babelrc` (Recommended)

.babelrc

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

Via CLI

$ babel --plugins react-add-display-name script.js

Via Node API

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

Source of displayName

For createReactClass or createClass calls, the variable name becomes displayName:

let Foo = createReactClass({
    // ...
});

Becomes

let Foo = createReactClass({
    displayName: 'Foo',
    // ...
});

For named classes, class name becomes displayName, all classes with a render 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 add displayName to component.

ecomfe / babel-plugin-react-add-display-name Goto Github PK