Nodding Previously Managed
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

rogain-component-if

1.1.0 • Public • Published

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

install

npm i rogain-component-if

Downloadsweekly downloads

4

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability