babel-plugin-transform-react-infer-display-name

babel-plugin-transform-react-infer-display-name

Add displayName to React components (descendants of React.Component and SFCs).

React.Component Example

In

export class StatefulCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

  render() {
    return (
      <div>
        {this.state.counter}
      </div>
    );
  }
}

Out

export class StatefulCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

  render() {
    return (
      <div>
        {this.state.counter}
      </div>
    );
  }
}
StatefulCounter.displayName = 'StatefulCounter';

SFC Example

In

export function PureCounter({ counter }) {
  return (
    <div>
      {counter}
    </div>
  );
}

Out

export function PureCounter({ counter }) {
  return (
    <div>
      {counter}
    </div>
  );
}
PureCounter.displayName = 'PureCounter';

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

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

Via Node API

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

Running Tests

from the root directory

npm install --global mocha
mocha