React Condition

React Condition works with React Hooks as part of @leebyron‘s React Velcro architecture

Installation

$ yarn add react-condition

$ npm i react-condition

If conditions

Use the test prop with <If> and <ElseIf> elements to conditionally include certain elements. When an <If> test is truthy it does not render any <ElseIf> or <Else> children. However when it is falsey it only renders <ElseIf> and <Else> children.

<If test={someCondition}>
  This will only be shown if someCondition is truthy.
  <ElseIf test={otherCondition}>
    This will only be shown if someCondition is falsey
    and otherCondition is truthy.
    <Else>
      This will only be shown if both someCondition and
      otherCondition are both falsey.
    </Else>
  </ElseIf>
  <Else>
    This will be shown if someCondition is falsey.
    <If test={finalCondition}>
      This will be shown if someCondition is falsey
      and finalCondition is truthy.
    </If>
  </Else>
</If>

Alternatively, you can provide then and else props.

<If
  test={someCondition}
  then={"This will only be shown if someCondition is truthy."}
  else={"This will be shown if someCondition is falsey."}
></If>

Switch conditions

Use the expression prop with <Switch> element to conditionally include certain elements. When an <Switch> compares a value from <Case> and the comparison is truthy it only renders the matching child. However, when the comparison is falsey it continues through the children until it finds a match, or falls back to <Default>.

<Switch expression={"blue"}>
    <Case value={"red"}>
        red
    </Case>
    <Case value={"green"}>
        green
    </Case>
    <Case value={"blue"}>
        blue
    </Case>
</Switch>

<Switch expression={"hot fucking pink"}>
    <Case value={"red"}>
        red
    </Case>
    <Case value={"green"}>
        green
    </Case>
    <Case value={"blue"}>
        blue
    </Case>
    <Default>
        no color
    </Default>
</Switch>

Alternatively, you can provide then as props to <Case> or <Default>

<Switch expression={"hot fucking pink"}>
    <Case value={"red"} then={"red"} ></Case>
    <Case value={"red"} then={"green"} ></Case>
    <Case value={"red"} then={"blue"} ></Case>
    <Default then={"no color"} ></Default>
</Switch>

See also

@leebyron/react-loops - The father (or mother, idfk) of this library