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 value={angerLevel}>
{[ eq(0), <span>sleepy</span> ]}
{[ between(0, 20), <span>calm</span> ]}
{[ between(20, 40), <span>angry</span> ]}
{[ between(40, 41), <span>raging</span> ]}
{[ T, <span>unknown anger level</span> ]}
</Cond>
// or as components
<Cond value={angerLevel}>
<Clause test={eq(0)}><span>sleepy</span></Clause>
<Clause test={between(0, 20)}><span>calm</span></Clause>
<Clause test={between(20, 40)}><span>angry</span></Clause>
<Clause test={between(40, 41)}><span>raging</span></Clause>
<Default><span>unknown anger level</span></Default>
</Cond>Installation | Importing | The Component `Cond` | Clauses | Helper Functions
$ npm install --save react-cond
React-cond exports the component Cond and a function T.
import { Cond, T } from 'react-cond';
// or the old way
var reactCond = require('react-cond');
var Cond = reactCond.Cond;
var T = reactCond.T;Cond is a react component, which controls rendering of its child components.
<Cond value={nr}>
{[ T, <p key="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.
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 value={nr}>
{[ x => x > 0, <Positive /> ]}
{[ x => x < 0, <Negative /> ]}
{[ T, <Zero /> ]} // `T` always evaluates to true. see Helper Functions.
</Cond>
// or with Clause/Default
import { Cond, Clause, Default } from 'react-cond';
// ...
<Cond value={nr}>
<Clause test={x => x > 0}><Positive /></Clause>
<Clause test={x => x < 0}><Negative /></Clause>
<Default><Zero /></Default>
</Cond>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
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 value={'_test_'}>
{/* ... your clauses ... */}
{[ T, <h1>otherwise</h1>]}
</Cond>eq([property:String], value:Any)
Condition to test if the value is equal (===) to a given value.
import { Cond, eq } from 'react-cond';
<Cond value={this.state.nr}>
{[ eq(42), <h1>nr is 42</h1>]}
</Cond>isTrue([property:String])
Condition to test if the value is true.
import { Cond, isTrue } from 'react-cond';
<Cond value={true}>
{[ isTrue, <h1>true</h1>]}
</Cond>isFalse([property:String])
Condition to test if the value is false.
import { Cond, isFalse } from 'react-cond';
<Cond value={false}>
{[ isFalse, <h1>false</h1>]}
</Cond>isUndefined([property:String])
Condition to test if the value is undefined.
import { Cond, isUndefined } from 'react-cond';
<Cond value={undefined}>
{[ isUndefined, <h1>undefined</h1>]}
</Cond>isNull([property:String])
Condition to test if the value is null.
import { Cond, isNull } from 'react-cond';
<Cond value={null}>
{[ isNull, <h1>null</h1>]}
</Cond>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 value={this.state.nr}>
{[ not(eq(42)), <h1>nr isn't 42</h1>]}
</Cond>gt([property:String], value:Any)
Condition to test if the value is greater than (>) a given value.
import { Cond, gt } from 'react-cond';
<Cond value={this.state.nr}>
{[ gt(42), <h1>nr greater than 42</h1>]}
</Cond>lt([property:String], value:Any)
Condition to test if the value is lower than (<) a given value.
import { Cond, lt } from 'react-cond';
<Cond value={this.state.nr}>
{[ lt(42), <h1>nr lower than 42</h1>]}
</Cond>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 value={this.state.nr}>
{[ gte(42), <h1>nr greater or equal than 42</h1>]}
</Cond>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 value={this.state.nr}>
{[ lte(42), <h1>nr lower or equal than 42</h1>]}
</Cond>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 value={this.state.nr}>
{[ between(1, 10), <h1>nr between 1 and 10</h1>]}
</Cond>and(condition:Function, condition:Function)
Combine two conditions with a logical and (&&).
import { Cond, and, eq } from 'react-cond';
const startsWith = x => str => str.startsWith(x);
const endsWith = x => str => str.endsWith(x);
<Cond value={str}>
{[ and(startsWith('-'), endsWith('-')), <h1>string starts and ends with a dash</h1>]}
</Cond>or(condition:Function, condition:Function)
Combine two conditions with a logical or (||).
import { Cond, or, eq } from 'react-cond';
const startsWith = x => str => str.startsWith(x);
const endsWith = x => str => str.endsWith(x);
<Cond value={str}>
{[ or(startsWith('-'), endsWith('-')), <h1>string starts or ends with a dash</h1>]}
</Cond>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 value={{ val1:12, val2: 13 }}>
{[ and(value('val1', eq(11)), value('val2', eq(12))), <h1>unexpected</h1>]}
{[ and(value('val1', eq(12)), value('val2', eq(13))), <h1>expected</h1>]}
{[ T, <h1>unexpected</h1>]}
</Cond>react-cond works great with libraries like Ramda.
import R, { __, T } from 'ramda';
const notEquals = R.compose(R.not, R.equals);
const gt11 = R.gt(__, 11);
<Cond value={10}>
{[ notEquals(10), <h1>not 10</h1>]}
{[ gt11, <h1>greater than 11</h1>]}
{[ T, <h1>otherwise</h1>]}
</Cond>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.createClass({
// ...
render() {
const { items } = this.state;
return (
<ul>
<Cond value={this.state}>
{[ ({ isLoading }) => isLoading, <Spinner /> ]}
{[ eq('hasErrors', true), <Error /> ]}
{ifNoSearchResult}
{[ otherwise, items ]}
</Cond>
</ul>
);
}
});
const ifNoSearchResult = [
({ noSearchResult, items }) => noSearchResult || items.length <= 0
, <NotingFound />
];MIT © Christoph Hermann