Usage |
Examples |
License
logo by Justin Mezzell
Lisp-Style conditional rendering in react.
Make conditional rendering in react simple and expressive. react-cond
is implemented as a component, which takes n clauses as its children. Each clause is an array with a condition and a component. The first child-component, where the condition evaluates to true
gets rendered in a Cond
component.
React-cond is designed to work great with FP-libraries like Ramda.
import Cond between eq T Clause Default from 'react-cond'; <Cond => <span>sleepy</span> <span>calm</span> <span>angry</span> <span>raging</span> T <span>unknown anger level</span> </Cond> // or as components <Cond => <Clause =><span>sleepy</span></Clause> <Clause =><span>calm</span></Clause> <Clause =><span>angry</span></Clause> <Clause =><span>raging</span></Clause> <Default><span>unknown anger level</span></Default></Cond>
Usage
Installation | Importing | The Component `Cond` | Clauses | Helper Functions
Installation
$ npm install --save react-cond
Importing
React-cond
exports the component Cond
and a function T
.
;// or the old wayvar reactCond = ;var Cond = reactCondCond;var T = reactCondT;
Cond
The Component Cond
is a react component, which controls rendering of its child components.
<Cond => T <p ="always-true">always rendered</p> </Cond>
Cond
has two props
: value
and compare
.
value
is the value which gets passed to each clause.
compare
is the default compare function for each clause.
Clauses
The Cond
component wraps n clauses.
A clause has either the following format:
{[ condition, <Component /> ]}
f.e. {[ x=> x > 0, <Positive /> ]}
or is a Clause
/Default
component.
import Cond T from 'react-cond';// ... <Cond => x > 0 <Positive /> x < 0 <Negative /> T <Zero /> // `T` always evaluates to true. see Helper Functions.</Cond> // or with Clause/Defaultimport Cond Clause Default from 'react-cond';// ... <Cond => <Clause =><Positive /></Clause> <Clause =><Negative /></Clause> <Default><Zero /></Default></Cond>
Helper Functions
T | eq | isTrue | isFalse | isUndefined | isNull | not | gt | lt | gte | lte | between | and | or | value
The following helper functions are optional, but allow you to write even more expressive conditions for your clauses.
T
T
Can be used as an otherwise or else clause. It always evaluates to true
.
import Cond T from 'react-cond';// or youe can import T as otherwise.import Cond T as otherwise from 'react-cond'; <Cond => /* ... your clauses ... */ T <h1>otherwise</h1></Cond>
eq
eq([property:String], value:Any)
Condition to test if the value is equal (===
) to a given value.
import Cond eq from 'react-cond'; <Cond => <h1>nr is 42</h1></Cond>
isTrue
isTrue([property:String])
Condition to test if the value is true
.
import Cond isTrue from 'react-cond'; <Cond => isTrue <h1>true</h1></Cond>
isFalse
isFalse([property:String])
Condition to test if the value is false
.
import Cond isFalse from 'react-cond'; <Cond => isFalse <h1>false</h1></Cond>
isUndefined
isUndefined([property:String])
Condition to test if the value is undefined
.
import Cond isUndefined from 'react-cond'; <Cond => isUndefined <h1>undefined</h1></Cond>
isNull
isNull([property:String])
Condition to test if the value is null
.
import Cond isNull from 'react-cond'; <Cond => isNull <h1>null</h1></Cond>
not
not(condition:Function)
Inverts a condition. Can be used to test if a value is not equal (!==
) to a given value.
import Cond eq not from 'react-cond'; <Cond => <h1>nr 42</h1></Cond>
gt
gt([property:String], value:Any)
Condition to test if the value is greater than (>
) a given value.
import Cond gt from 'react-cond'; <Cond => <h1>nr greater than 42</h1></Cond>
lt
lt([property:String], value:Any)
Condition to test if the value is lower than (<
) a given value.
import Cond lt from 'react-cond'; <Cond => <h1>nr lower than 42</h1></Cond>
gte
gte([property:String], value:Any)
Condition to test if the value is greater or equal than (>=
) a given value.
import Cond gte from 'react-cond'; <Cond => <h1>nr greater or equal than 42</h1></Cond>
lte
lte([property:String], value:Any)
Condition to test if the value is lower or equal than (<=
) a given value.
import Cond lte from 'react-cond'; <Cond => <h1>nr lower or equal than 42</h1></Cond>
between
between([property:String], start:Any, end:Any)
Condition to test if the value is between two given values.
import Cond between from 'react-cond'; <Cond => <h1>nr between 1 and 10</h1></Cond>
and
and(condition:Function, condition:Function)
Combine two conditions with a logical and (&&
).
import Cond and eq from 'react-cond'; const startsWith = str;const endsWith = str; <Cond => <h1>string starts and ends with a dash</h1></Cond>
or
or(condition:Function, condition:Function)
Combine two conditions with a logical or (||
).
import Cond or eq from 'react-cond'; const startsWith = str;const endsWith = str; <Cond => <h1>string starts or ends with a dash</h1></Cond>
value
value(property:String, condition:Function)
If your conditions depend on multiple values you can pass an object to the value
prop
and use value
to access them.
<Cond => <h1>unexpected</h1> <h1>expected</h1> T <h1>unexpected</h1></Cond>
Examples
Ramda
react-cond
works great with libraries like Ramda.
import R __ T from 'ramda'; const notEquals = R;const gt11 = R; <Cond => <h1>not 10</h1> gt11 <h1>greater than 11</h1> T <h1>otherwise</h1></Cond>
Multiple Values
This example shows how you can make conditions which depend on more than one value.
import Cond eq T as otherwise from 'react-cond'; const List = React; const ifNoSearchResult = noSearchResult items noSearchResult || itemslength <= 0 <NotingFound />;
License
MIT © Christoph Hermann