@qc/react-conditionals

A set of React components that conditionally renders its renderable children.

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 If's condition is truthy.
  </Then>
  <Else>
    This is rendered when If's condition is not
    truthy.
  </Else>
  This will be rendered regardless of If's condition.
  That is, any renderable children outside of Thens or
  Elses will be rendered.
  <Else>
    This will also be rendered when condition is NOT truthy.
    That is, all immediate child Else components will be
    rendered when the condition is not true.
  </Else>
  <Then>
    This will also be rendered when If'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 NOT be rendered.  Only the first When
    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 &lt;When> components.  In fact, it
    may cause any successive &lt;When> components to not
    render.
  </Else>
  ...
</Case>