babel-plugin-transform-react-remove-display-name

babel-plugin-transform-react-remove-display-name

Make React component displayName property available only in none production environment during the build :sparkles:

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

Via .babelrc (Recommended)

.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:

1. babel-plugin-transform-react-remove-prop-types
2. babel-plugin-transform-react-handled-props

License

MIT