renderif

Render. If. The world's simplest React component.

Installation

Let's quickly get this out of the way. How do I get your aweome code?

$ npm i --save renderif

What problem does it solve?

With renderif you can stay within JSX without context switching.

<div>
  <Render if={true}>
    <div>This will render</div>
  </Render>
 
  <Render if={false}>
    <div>This will NOT</div>
  </Render>
</div>

OK, so you would never actually code with boolean literals like that, but you get the picture.

Here is more of a real life example:

<div>
  <Render if={loading}>
    <LoadingOverlay />
  </Render>
  <div>Rest of my component here</div>
</div>

if/then/else? Sure, why not?

renderif also supports the more concise if/then and the if/then/else syntax shown below. Note that in this pattern, children is unused.

<div>
  <Render if={true} then={
    <div>This will render</div>
  }/>
  <div>Rest of my component here</div>
</div>

<div>
  <Render if={true} then={
    <div>This will render</div>
  } else={
    <div>This will NOT</div>
  }/>
  <div>Rest of my component here</div>
</div>

Live Example

You can see a live example running here on codesandbox.