No Plugins; Monolithic

    @qc/react-conditionals

    0.0.2 • Public • Published

    @qc/react-conditionals

    Build Status Coverage Status License Downloads

    npm badge

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

    Installation

    npm install --save @qc/react-conditionals

    or

    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>

    Other Packages from QC

    Maintainers

    License

    ISC

    Install

    npm i @qc/react-conditionals

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    ISC

    Unpacked Size

    19.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • qc