qc-react-conditionals

A set of React components that conditionally renders its renderable children. These components are only compatible with React v16 or above.

Installation

npm install --save qc-react-conditionals

yarn add qc-react-conditionals

Example Usage

import React from 'react'
 
import { Case, Else, If, Then, When } from 'qc-react-conditionals'
 
 
function SomeComponent(props) {
  return (
    <If is={status === 'active'}>
      <Then>
        <span>The status is active!</span>
      </Then>
      <Else>
        <span>The status is not active.</span>
      </Else>
    </If>
    <Case>
      <When is={status === 'active'}>
        <span>The status is active!</span>
      </When>
      <When is={status === 'pending'}>
        <span>The status is pending!</span>
      </When>
      <Else>
        <span>The status is unknown!</span>
      </Else>
    </Case>
    <When is={status === 'active'}>
      <span>The status is active!</span>
    </When>
  )
}

<If>

<If> may take as many <Then> or <Else> components as you like. The order of which does not matter.

<If is={status === 'active'}>
  <Then>
    This is rendered when <code>If</code>'s condition is
    truthy.
  </Then>
  <Else>
    This is rendered when <code>If</code>'s condition is not
    truthy.
  </Else>
  This will be rendered regardless of <code>If</code>'s
  condition.  That is, any renderable children outside of
  <code>Then</code>s or <code>Else</code>s will be rendered.
  <Else>
    This will also be rendered when condition is
    <strong>NOT</strong> true.  That is, all immediate
    child <code>Else</code> components will be rendered
    when the condition is not true.
  </Else>
  <Then>
    This will also be rendered when <code>If</code>'s
    condition is truthy.
  </Then>
</If>

<Case>

<Case> may take as many <When> components you like. It may optionally take one <Else> component. The order of the <When> and <Else> components in a <Case> is important. <When>s must come before the <Else>.

<Case>
  <When is={status === 'active'}>
    <span>The status is active!</span>
  </When>
  <When is={status === 'active'}>
    This will <strong>not</strong> be rendered.  Only the first
    <code>When</code> component with a truty condition will be
    rendered.
  </When>
  <When is={status === 'pending'}>
    <span>The status is pending!</span>
  </When>
  <Else>
    <span>The status is unknown!</span>
  </Else>
</Case>

Renderables between <When> and <Else> components are always rendered.

<Case>
  This is always rendered.
  <When is={...}>
    ...
  </When>
  <span>This is also always rendered.</span>
  <When is={...}>
    ...
  </When>
  <span>This is also always rendered.</span>
  <Else>...</Else>
  <span>This is also always rendered.</span>
</Case>

<When>

<When> can be used on its own outside of a <Case> parent component. It is equivalent to an <If>/<Then> combination.

<When is={status === 'active'}>
  This will be rendered when the condition is true.
</When>

Unsupported Usage

<Then> Outside of an <If>

<Then>
  This is not guaranteed to be rendered or not since it does
  not have an appropriate parent.
</Then>

<Else> Outside of a <Case> or an <If>

<Else>
  This is not guaranteed to be rendered or not since it does
  not have appropriate parents.
</Else>

<Else> before <When>

<Case>
  <Else>
    This is not guaranteed to be rendered or not since it
    comes before any <code>&lt;When></code> components.  In
    fact, it may cause any successive <code>&lt;When></code>
    components to not render.
  </Else>
  ...
</Case>