babel-plugin-transform-component-name

0.1.1 • Public • Published

babel-plugin-transform-component-name

Add display name to react components.

build status coverage npm dependencies

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']
});

Readme

Keywords

Package Sidebar

Install

npm i babel-plugin-transform-component-name

Weekly Downloads

169

Version

0.1.1

License

Unlicense

Unpacked Size

10.7 kB

Total Files

5

Last publish

Collaborators

  • dk00