render-if
A tiny, yet conveniently curried way to render conditional React components. Works great with both React and React Native.
renderIf(predicate)(element)Installation
npm install render-if --save
You can also install the eslint plugin, eslint-plugin-render-if
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.
renderIf(1 + 1 === 2)(
<Text>Hello World!</Text>
)As an in-line expression
class MyComponent extends Component {
render() {
return (
{renderIf(1 + 2 === 3)(
<span>The universe is working</span>
)}
);
}
}As a lazy in-line expression
class MyComponent extends Component {
render() {
return (
{renderIf(1 + 2 === 3)(() => (
<span>This is only invoked if the universe is working</span>
))}
);
}
}As a named function
class MyComponent extends Component {
render() {
const ifTheUniverseIsWorking = renderIf(1 + 2 === 3);
return (
{ifTheUniverseIsWorking(
<span>The universe is still wroking</span>
)}
)
}
}As a composed function
const ifEven = number => renderIf(number % 2 === 0);
const ifOdd = number => renderIf(number % 2 !== 0);
class MyComponent extends Component {
render() {
return (
{ifEven(this.props.count)(
<span>{this.props.count} is even</span>
)}
{ifOdd(this.props.count)(
<span>{this.props.count} is odd</span>
)}
);
}
}What it no longer looks like
class MyComponent extends Component {
render() {
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.anotherConditionalRender()}
</div>
);
}
anotherConditionalRender() {
if (1 + 1 === 2) {
return <span>I am rendered!</span>
}
}
}