1.1.0 • Published 8 years ago
rogain-component-if v1.1.0
rogain-component-if
<If data={variable} or and not equal defined empty gt gte lt lte />Passes its children through if data passes defined attribute tests. Any trees defined after the <Else /> will be passed through if data doesn't pass attributes tests.
The attributes and, or, and not can be used to define how all tests should logically be grouped. The attribute predicates equal, defined, empty, gt, gte, lt, lte can be used to test against the data attribute value.
Attributes
| Attribute | Description |
|---|---|
| data | Variable or Expression. |
| and | Runs all tests with AND logic, short circuits when any predicate fails. The default is and if or is not defined. |
| or | Runs all predicates with OR logic, short cicuits when any predicate passes. |
| not | Negates the end result of all tests. |
Attribute Predicates
| Attribute | Description |
|---|---|
| equal | Variable or Expression. returns true if it's value is equal to data |
| defined | if defined, returns true if data is defined |
| empty | if defined, returns true if data is an empty array or object |
| gt | Variable or Expression. returns true if it's value is greater than data |
| gte | Variable or Expression. returns true if it's value is greater than or equal to data |
| lt | Variable or Expression. returns true if it's value is less than data |
| lte | Variable or Expression. returns true if it's value is thess than or equal to data |
Examples
Default Predicates / Else
If no tests are defined, the default predicates are <If data={var} and defined empty="false"></If>
<If data={loggedIn} equal="true">
<Dashboard />
<Else />
<Login />
</If>Negated Predicates
<If data={error} defined="false">Way to go, no errors!</If>
<If data={error} not defined>Way to go, no errors!</If>Complex Predicates
If and or or attributes aren't defined the predicates will be run using AND logic by default.
<If data={index} lt="100" gte="0">10 - 99</If>
<If data={index} lt="1000" gte="100">100 - 999</If>
<If data={index} gte="1000">1000+</If>OR Logic
<If data={mythings} or empty defined="false">MY THINGS BE MISSING</If>Install
With npm do:
npm install rogain-component-ifLicense
MIT