babel-plugin-transform-component-name

Add display name to react components.

Let react dev tools show component names instead of unknown, by adding names to functional components for development builds.

If lower case started JSX element type names are available in the scope, they are treated as custom components.

JSX attribute class are renamed to className.

Examples

avatar.jsx

export default ({url}) =>
<div class="avatar">
  <img src={url} />
</div>

Out

export default Object.assign(({url}) =>
<div className="avatar">
  <img src={url} />
</div>, {displayName: 'avatar'})

In

import UserScreen from './user-screen'
import userAvatar from './user-avatar'
 
<UserScreen>
  <user-avatar />
</UserScreen>

Out

import UserScreen from './user-screen';
import userAvatar from './user-avatar';
 
const _userAvatar = userAvatar;
<UserScreen>
  <_userAvatar />
</UserScreen>;

Installation

npm i --save-dev babel-plugin-transform-component-name

Usage

.babelrc.js

module.exports = {
  plugins: ['transform-component-name']
}

Via CLI

babel --plugins transform-component-name script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['transform-component-name']
});