0.1.1 • Published 5 years ago
babel-plugin-transform-component-name v0.1.1
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']
});