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-if

License

MIT