babel-plugin-transform-react-remove-display-name
Make React component displayName
property available only in none production environment during the build
Installation
$ npm install --save-dev babel-plugin-transform-react-remove-display-name
// or
$ yarn add --dev babel-plugin-transform-react-remove-display-name
This plugin is for Babel 7
Story
This plugin was originally created for Semantic UI React package.
It wraps each React component displayName
property with an if statement which makes sure it will be available only in none production environment.
Example transform
In
const Baz = (props) => (
<div {...props} />
)
Baz.displayName = "Baz"
Out
const Baz = (props) => (
<div {...props} />
)
if(process.env.NODE_ENV !== 'production') {
Baz.displayName = "Baz"
}
Usage
.babelrc
(Recommended)
Via .babelrc
{
"plugins": ["transform-react-remove-display-name"]
}
Via CLI
$ babel --plugins transform-react-remove-display-name script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-react-remove-display-name"]
});
Inspiration
This plugin is inspired by:
License
MIT