Have ideas to improve npm?Join in the discussion! »

    babel-plugin-jsx-fragment

    4.0.3 • Public • Published

    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)
      })
    );

    Install

    npm i babel-plugin-jsx-fragment

    DownloadsWeekly Downloads

    76

    Version

    4.0.3

    License

    MIT

    Last publish

    Collaborators

    • avatar