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

1.1.0 • Public • Published

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

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

CI npm

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

Package Sidebar

Install

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

Weekly Downloads

9

Version

1.1.0

License

MIT

Unpacked Size

12.5 kB

Total Files

5

Last publish

Collaborators

  • felixmosh