babel-plugin-transform-jsx-flexible

Turn JSX into arbitrary function calls

This is a drop-in replacement for babel-plugin-transform-react-jsx, with the additional feature that multiple JSX handler functions can be used in the same file. The plugin passes all tests for the transform-react-jsx plugin (included in this repo).

Changing the JSX handler within a file is accomplished by enclosing a JSX block within a special tag that is defined in the plugin's configuration (see the tags option below).

Installation

npm install --save-dev babel-plugin-transform-react-jsx

Usage

Via .babelrc (Recommended)

.babelrc

Without options (no different from transform-react-jsx):

{
  "plugins": ["transform-jsx-flexible"]
}

With options:

{
  "plugins": [
    ["transform-jsx-flexible", {
      "tags": {
        "CustomTag1": "createElement_CustomTag1",
        "CustomTag2": "createElement_CustomTag2"
      }
    }]
  ]
}

Code In

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

var somethingElse = <CustomTag1>
  <div />
</CustomTag1>;

Code Out

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

var somethingElse = createElement_CustomTag1(CustomTag1, null,
  createElement_CustomTag1("div", null)
);

Options

pragma

Inherited from babel-plugin-transform-react-jsx.

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions.

Note that the @jsx React.DOM pragma has been deprecated as of React v0.12

useBuiltIns

Inherited from babel-plugin-transform-react-jsx.

boolean, defaults to false.

When spreading props, use Object.assign directly instead of Babel's extend helper.

tags

An object that maps custom JSX tag names (the keys) to custom functions (the values) that should be used to render any JSX element enclosed inside the given custom tag name.

For example:

"plugins": [
  "transform-jsx-flexible",
  {
    "tags": {
      "CustomTag1": "createElement_CustomTag1",
      "CustomTag2": "createElement_CustomTag2"
    }
  }
]

Using this configuration, any CustomTag1 element and any JSX elements enclosed inside of it will be created using the function createElement_CustomTag1() in the transpiled JS code, instead of React.createElement (or the current default JSX function).

The same goes for CustomTag2 and createElement_CustomTag2. Also, JSX handlers can be changed within the same block by nesting these custom tags together.