https://github.com/nylen/babel-plugin-transform-jsx-flexible
Turn JSX into arbitrary function calls
https://github.com/nylen/babel-plugin-transform-jsx-flexible
Last synced: 9 days ago
JSON representation
Turn JSX into arbitrary function calls
- Host: GitHub
- URL: https://github.com/nylen/babel-plugin-transform-jsx-flexible
- Owner: nylen
- Created: 2017-05-24T18:21:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-27T21:51:45.000Z (about 9 years ago)
- Last Synced: 2025-10-06T15:30:01.746Z (9 months ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-transform-jsx-flexible [](https://travis-ci.org/nylen/babel-plugin-transform-jsx-flexible) [](https://www.npmjs.org/package/babel-plugin-transform-jsx-flexible)
> Turn JSX into arbitrary function calls
This is a drop-in replacement for
[`babel-plugin-transform-react-jsx`](https://github.com/babel/babel/tree/v6.24.1/packages/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`](#tags)
option below).
## Installation
```sh
npm install --save-dev babel-plugin-transform-react-jsx
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
Without options (no different from `transform-react-jsx`):
```json
{
"plugins": ["transform-jsx-flexible"]
}
```
With options:
```json
{
"plugins": [
["transform-jsx-flexible", {
"tags": {
"CustomTag1": "createElement_CustomTag1",
"CustomTag2": "createElement_CustomTag2"
}
}]
]
}
```
**Code In**
```javascript
var profile =
{[user.firstName, user.lastName].join(' ')}
;
var somethingElse =
;
```
**Code Out**
```javascript
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:
```js
"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.