react-conditional-flow

Component(s) intended to simplify react conditional rendering

Components:

ElseIf

How to use

| Prop | Type | Required/Default | Description | | ---------- | --------- | ---------------- | ------------------------------------------------------------------------------------------------------- | | if | boolean | no / false | determines if prop render should be rendered | | render | element | no / null | JSX element to be rendered should if be true | | conditions | array | no / [] | Array of objects: {if: boolean, render: element} used to determine if/else if conditional rendering | | else | element | no / null | JSX element to be rendered should no provided condition be met |

There are two ways of using the ElseIf. Either for a single if with an optional else:

Example 1

import { ElseIf } from 'react-conditional-flow';

<ElseIf if={sky === blue} render={<p>Blue Skys and Sunshine!</p>} /> // else case is null by default

// or with an else
<ElseIf
  if={sky === blue}
  render={<p>Blue Skys and Sunshine!</p>} // What to render should `if` be true
  else={<p>The Sky isnt blue!?</p>} // what to render should `if` be false
  />

Or with an array of conditions (array of objects with the shape { if: bool, render: element }).

The first if property inside the conditions array is used to determine which render should be used, all other renders are ignored.

Example 2

import { ElseIf } from 'react-conditional-flow';

const myConditions = [
  { if: false, render: <p>{one}</p> }, // skipped because `if` is false
  { if: true, render: <p>{two}</p> }, // This render is used because `if` was true
  { if: true, render: <p>{three}</p> } // This condition it's checked because there was already an `if` that was true at an earlier index
];

<ElseIf conditions={myConditions} />;

// an else can still be provided in an array of conditions

const myConditions = [
  { if: false, render: <p>{one}</p> }, // skipped because `if` is false
  { if: false, render: <p>{two}</p> }, // skipped because `if` is false
  { if: false, render: <p>{three}</p> } // skipped because `if` is false
];

<ElseIf conditions={myConditions} else={<p>Nothing to see here!</p>} />; // else will render as no conditions were met

Back to Top

Switch, Case, Default

As an alternative to using the ElseIf Component, you can use a combindation of Switch, Case, and Default components to mimick the the JS switch() conditional shape except in form of JSX.

The Switch Component compares it's on property with it's Case children's value prop. The first matching result is rendered, ignoring all other Case(s).

How to use

Switch

| Prop | Type | Required | Description | | -------- | ---------------- | -------- | --------------------------------------------------------------------------------------------------------- | | on | any | yes | variable to be compared to render child Case Component | | children | Case Component | yes | Component to be rendered when a match is found between Case's value prop and the Switch's on prop |

Case

| Prop | Type | Required | Description | | -------- | ------------------------ | -------- | ---------------------------------------------------------------------------------- | | value | any | yes | determines if children should be rendered based on match with Switch's on prop | | children | element or [element] | yes | elements to be rendered |

Default (optional)

| Prop | Type | Required | Description | | -------- | ------------------------ | -------- | ----------------------- | | children | element or [element] | yes | elements to be rendered |

Example 1

import { Switch, Case, Default } from 'react-conditional-flow';

let switcher = 'red';

<Switch on={switcher}>
  {/* This Case will render as the value matches the Switch's {on} prop */}
  <Case value="red">
    <p>Rendering the red case</p>
  </Case>
  <Case value="blue">
    <p>Rendering the blue case</p>
  </Case>
</Switch>;

// A Default Component is optional with a Switch block, if no Default is provided and
// no Case(s) match then the Switch will render null

switcher = 'green';

<Switch on={switcher}>
  <Case value="red">
    <p>Rendering the red case</p>
  </Case>
  <Case value="blue">
    <p>Rendering the blue case</p>
  </Case>
  <Default>
    {/* The Default will render as no value matches the Switch's {on} prop */}
    <p>Im what renders by default!</p>
  </Default>
</Switch>;

// Case(s) can be given an array of values as well which will all be taken into account when searching for a match in the Switch

switcher = 'yellow';

<Switch on={switcher}>
  <Case value="red">
    <p>Rendering the red case</p>
  </Case>
  <Case value={['green', 'yellow', 'blue']}>
    {/* This Case will render as one of the values match the Switch's {on} prop */}
    <p>Rendering the green, yellow and blue case</p>
  </Case>
  <Case value="blue">
    {/* fun fact! This will never render as blue is already apart of a previous Case */}
    <p>Rendering the blue case</p>
  </Case>
  <Default>
    <p>Im what renders by default!</p>
  </Default>
</Switch>;

Back to Top

TryCatch

How to use

| Prop | Type | Required/Default | Description | | ----- | ------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------ | | try | func | yes / no default | function that returns a Component/JSX | | catch | func | no / throw Error | callback which is provided (error, info) as arguments to either render custom error handling or return a Component/JSX |

TryCatch is intended to reduce boiler plate with handling errors that occur with rendering.

Example 1

import { TryCatch } from 'react-conditional-flow';

const renderComponentWithAPICallFailure = () => <SudoCode />;

<TryCatch
  try={renderComponentWithAPICallFailure}
  catch={(error) => (
    <span>
      An error has occurred! {error}
    </span>
  )}
/>;

// or without a catch. This will result in an error being thrown by the TryCatch component.
// It's best to provide a custom catch so you can do whatever specific logic you need to should something unexpected happen
<TryCatch try={renderComponentWithAPICallFailure} />;

Back to Top

Contributing

We welcome Your interest in the American Express Open Source Community on Github. Any Contributor to any Open Source Project managed by the American Express Open Source Community must accept and sign an Agreement indicating agreement to the terms below. Except for the rights granted in this Agreement to American Express and to recipients of software distributed by American Express, You reserve all right, title, and interest, if any, in and to Your Contributions. Please fill out the Agreement.

License

Any contributions made under this project will be governed by the Apache License 2.0.

Code of Conduct

This project adheres to the American Express Community Guidelines. By participating, you are expected to honor these guidelines.