render-ifelse
An extension to render-if
A tiny, yet conveniently curried way to render conditional React components. Works great with both React and React Native.
elementOnTrueelementOnFalse
What it looks like
renderIfElse
is a curried function that takes a predicate and returns a function accepting two elements, first of them will only be returned if the predicate is satisfied, else second is returned.
The function returned by renderIfElse
will also accept parameterless functions which will be invoked similarly, if the predicate is satisfied, first argument is invoked, else second is invoked, allowing for lazy evaluation of inner JSX.
<Text>Hello World!</Text> <Text>Hello Non-Decimal World!</Text>
As an in-line expression
{ return <span>The universe is working</span><span>The universe is broken</span> ; }
As a lazy in-line expression
{ return <span>This is only invoked if the universe is working</span> <span>This is only invoked if the universe is broken</span> ; }
As a named function
{ const isTheUniverseIsWorking = ; return }
As a composed function
const isEven = ; { return <span>thispropscount is even</span> <span>thispropscount is odd</span> ; }
What it no longer looks like
{ var conditionalOutput; if 1 + 1 === 2 conditionalOutput = <span>I am rendered!</span>; else conditionalOutput = <span>I am not rendered :</span>; } return <div> <!-- this works but it can get ugly --> conditionalOutput 1 + 1 === 2 && <span>I am rendered!</span> this </div> ; } { if 1 + 1 === 2 return <span>I am rendered!</span> }}