babel/packages/babel-plugin-transform-react-inline-elements
Brian Ng 4a14202e92 Update React transform READMEs from babel.github.io [skip ci] (#4903)
* Update React transform READMEs from babel.github.io [skip ci]

* Drop inline-elements polyfill message (move to website)
2016-11-28 20:50:17 -05:00
..
2016-03-03 14:49:20 -08:00
2016-05-02 19:43:49 -04:00

babel-plugin-transform-react-inline-elements

Replaces the React.createElement function with one that is more optimized for production: babelHelpers.jsx.

This transform should be enabled only in production (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic and skips important checks that happen in development mode, including propTypes.

Example

In

<Baz foo="bar" key="1"></Baz>;

Out

babelHelpers.jsx(Baz, {
  foo: "bar"
}, "1");

/**
 * Instead of
 *
 * React.createElement(Baz, {
 *   foo: "bar",
 *   key: "1",
 * });
 */

Deopt

// The plugin will still use React.createElement when `ref` or `object rest spread` is used
<Foo ref="bar" />
<Foo {...bar} />

Installation

npm install babel-plugin-transform-react-inline-elements

Usage

.babelrc

{
  "plugins": ["transform-react-inline-elements"]
}

Via CLI

babel --plugins transform-react-inline-elements script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-inline-elements"]
});

References