1.0.1 • Published 8 years ago
babel-plugin-jsx-cases-control v1.0.1
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.