render-if
A tiny, yet conveniently curried way to render conditional React components. Works great with both React and React Native.
element
What it looks like
renderIf
is a curried function that takes a predicate and returns a function accepting an element that will only be returned if the predicate is satisfied.
The function returned by renderIf
will also accept a parameterless function which will only be invoked if the predicate is satisfied, allowing for lazy evaluation of inner JSX.
<Text>Hello World!</Text>
As an in-line expression
{ return <span>The universe is working</span> ; }
As a lazy in-line expression
{ return <span>This is only invoked if the universe is working</span> ; }
As a named function
{ const ifTheUniverseIsWorking = ; return }
As a composed function
const ifEven = ;const ifOdd = ; { 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> }}