jsx fragment babel plugin

npm i -S babel-plugin-jsx-fragment

To use include jsx-fragment in your plugins array in your .babelrc or config object. Works with React 0.13+ . By default the fragment tag name is <frag> but you can configure it to whatever you want with the tagName option.

{
  "plugins": [
    ["jsx-fragment", { "tagName": "fragment" }]
  ]
}

The Problem

JSX gets ugly when using conditionals that return more than one jsx element

<div>
{ true && [
    <span/>, <div/>
  ]
}
</div>

You need to use commas (gross) and an array literal (yuck). jsx-fragment allows for a simple syntax to hide the ugliness, based on the discussion here. Just use the pseudo element <frag> to wrap arrays of Elements.

<div>
{ condition && <frag>
    <span/>
    <div/>
  </frag>
}
</div>

the <frag> element will be compiled away into the following.

React.createElement("div", null, condition && ReactFragment.create({
    key_0: React.createElement("span", null),
    key_1: React.createElement("div", null)
  })
);