How many times have you written ternary statements like this in your JSX code?
{ return <div> loading ? <Loading>Loading...</Loading> : <Content> <div>Content</div> </Content> </div> }Ugly? not readable? yes!
There's no built-in conditional syntax in React. This library adds the syntactic sugar to write conditionals as component. Inspired by jsx control statements
Install
npm install --save react-conditioner
Usage
If
The body of the if statement only gets evaluated if condition is true.
import React Component from 'react'import If from 'react-conditioner' { <If => <span>Truth</span> </If> <If => <span>Second Truth</span> </If> }Choose
This is an alternative syntax for more complex conditional statements.
import React Component from 'react'import Choose When Otherwise from 'react-conditioner' { return <div> <Choose> <When => <span>IfBlock</span> </When> <When => <span>ElseIfBlock</span> <span>Another ElseIfBlock</span> <span>...</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> </div> ; }