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-conditionalsor
yarn add qc-react-conditionalsExample Usage
import React from 'react' import Case Else If Then When from 'qc-react-conditionals' { return <If => <Then> <span>The status is active!</span> </Then> <Else> <span>The status is not active</span> </Else> </If> <Case> <When => <span>The status is active!</span> </When> <When => <span>The status is pending!</span> </When> <Else> <span>The status is unknown!</span> </Else> </Case> <When => <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 => <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 => <span>The status is active!</span> </When> <When => This will <strong>not</strong> be rendered Only the first <code>When</code> component with a truty condition will be rendered </When> <When => <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 => ... </When> <span>This is also always rendered</span> <When => ... </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 => 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><When></code> components In fact it may cause any successive <code><When></code> components to not render </Else> ...</Case>