babel-plugin-jsx-cases-control

A babel plugin extending the JSX syntax with easy to use conditional statement

Usage

Simple usage

<div if={this.div.will.only.exist.if.this.statement.is.true}>
    {console.log('This will not even execute when the condition evaluates false')}
</div>

Multiple branches

<Cases>
    <div if={first.condition}>
        This is shown if the first condition matches
    </div>
    <div if={second.condition}>
        This is shown if the first condition fail to match but second condition matches
    </div>
    <div>
        This is shown when all above condition doesn't match
    </div>
    <div>
        This is never shown
    </div>
</Cases>

Case switch

<Cases of={the.number}>
    <div if={0}>
        the number is 0
    </div>
    <div if={1}>
        the number is 1
    </div>
    <div if="hello">
        the number is actually a string
    </div>
    <div>
        the number is nothing above
    </div>
    <div>
        This is never shown
    </div>
</Cases>

Cave at

The Cases tag is converted to something like {condition ? consequent : alternate} so you can not set key or ref on this. Just set properties on the branch tags instead.

Tip

You may set if on the Cases tag too.