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.

``js
renderIfElse(predicate)(elementOnTrue[,elementOnFalse])
`

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.

`js
renderIfElse(1 + 1 === 2)(
Hello World!, Hello, Non-Decimal World!
)
`

$3

`jsx
class MyComponent extends Component {
render() {
return (
{renderIfElse(1 + 2 === 3)(
The universe is working,The universe is broken
)}
);
}
}
`

$3

`jsx
class MyComponent extends Component {
render() {
return (
{renderIfElse(1 + 2 === 3)(
() => (
This is only invoked if the universe is working
),
() => (
This is only invoked if the universe is broken
)
)}
);
}
}
`

$3

`jsx
class MyComponent extends Component {
render() {
const isTheUniverseIsWorking = renderIfElse(1 + 2 === 3);
return (
{isTheUniverseIsWorking(
The universe is still wroking,
The universe is not wroking
)}
)
}
}
`

$3


`jsx
const isEven = number => renderIfElse(number % 2 === 0);

class MyComponent extends Component {
render() {
return (
{isEven(this.props.count)(
{this.props.count} is even,
{this.props.count} is odd
)}
);
}
}
`

What it no longer looks like

`jsx
class MyComponent extends Component {
render() {
var conditionalOutput;
if (1 + 1 === 2) {
conditionalOutput = I am rendered!;
} else {
conditionalOutput = I am not rendered :(;
}
return (



);
}
anotherConditionalRender() {
if (1 + 1 === 2) {
return I am rendered!
}
}
}
``