React Conditionals

React Conditionals is a small React package for a better readability when using conditional rendering (mostly when nesting many conditionals). Got inspiration from v-if in Vue.

Before React Conditionals

const Article = ({ logged }) => (
  <div>
    <h1>Some cool article</h1>
    <p>Free part of the article...</p>
    {logged ? (
      <p>Rest of the article</p>
    ) : (
      <h2>Please login to see the rest of the article</h2>
    )}
  </div>
);

After React Conditionals

import {If, Else} from 'react-conditionals';

const Article = ({ logged }) => (
  <div>
    <h1>Some cool article</h1>
    <p>Free part of the article...</p>
    <If conditional={logged}>
      <p>Rest of the article</p>
    </If>
    <Else>
      <h2>Please login to see the rest of the article</h2>
    </Else>
    )}
  </div>

That's it! The If component receive the boolean conditional prop that will determine if the component should be rendered or not. The Else component needs to be right after the If component it should track! (or else it will never show anything!)

How it works

If the If component doesn't render the desired children, it will render and empty div with a 'react-conditionals-false' class which the Else component will read.