babel-plugin-transform-react-auto-add-display-name

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.