About

babel-plugin-transform-react-jsx has a pragma option that's used when transforming JSX to function calls instead of the default function React.createElement.

This Babel plugin is a companion to that feature that allows you to dynamically load a module associated with the pragma value.

From v1.0.0 this works with the Babel v6 plugin API, not v5.

Example:

Given this file:

``js

`

babel would normally transform the JSX to:

`js
React.createElement(Some, { jsx: "element" });
`

By setting the pragma option like this:

`js
babel.transform(code, {
plugins: [
["babel-plugin-transform-react-jsx", {
pragma: "whatever",
}],
]
})
`

It would instead transform it to:

`js
whatever(Some, { jsx: "element" });
`

However, you might need to load a module corresponding to whatever in each module containing JSX:

`js
import whatever from "whatever";
// or
var whatever = require("whatever");
`

This plugin allows you to make that part dynamic as well:

`js
babel.transform(code, {
plugins: [
["babel-plugin-transform-react-jsx", {
pragma: "whatever",
}],

["babel-plugin-jsx-pragmatic", {
module: "/something/whatever",
import: "whatever"
}],
]
})
`

Results in:

`js
import {default as whatever} from "/something/whatever";
`

Options

$3

String. Module ID or pathname. The value of the ModuleSpecifier of an import. Required.

$3

String. The identifier that you want to import the module with. This should correspond to the root identifier of the pragma value. Required. Examples:

`js
{
plugins: [
["babel-plugin-transform-react-jsx", {
pragma: "x",
}],

["babel-plugin-jsx-pragmatic", {
module: "/something/whatever",
import: "x"
}],
]
}

{
plugins: [
["babel-plugin-transform-react-jsx", {
pragma: "x.y",
}],

["babel-plugin-jsx-pragmatic", {
module: "/something/whatever",
import: "x"
}],
]
}
`

$3

String. The export that you want to import as import from module. Default value is default (the default export). Examples:

`js
// Will import the default export (default)
{
module: "whatever",
import: "x"
}
// import {default as x} from "whatever"


// Will import the default export (default)
{
module: "whatever",
import: "x",
export: "default",
}
// import {default as x} from "whatever"


// Will import the export named something
{
module: "whatever",
import: "x",
export: "something",
}
// import {something as x} from "whatever"
`

Known Issues

* Doesn't do anything special in the case that the file being transformed
already imports or declares an identifier with the same name as import`.

* Doesn't take into account when a file actually contains a JSX pragma comment.