react-control-flow-components

Control flow components for React to make writing JSX more natural.

import React from 'react';
import { Case, ForEach, If, Switch } from 'react-control-flow-components';

<If test={ condition }>
    <span>Only if true</span>
</If>

<Switch test={ condition }>
    <Case value="first">
        <span>If condition matches 'first'</span>
    </Case>
    <Case value="second">
        <span>If condition matches 'second'</span>
    </Case>
</Switch>

<ForEach items={ data }
         component={ DataView } />

Installation

Install with npm or yarn

npm install --save react-control-flow-components

Documentation

<If />

<If test={ condition }>
    <span>Only if true</span>
</If>

Prop	Type	Notes
test	Boolean	The expression to evaluate. Contents are rendered if the expression evaluates to truthy.

Note that children are evaluated by React before being passed to <If /> so if a variable within the test may be null or undefined, you'l need to check that before accessing the variable in a way that would generate an error.

<Switch />

<Switch test={ condition }>
    <Case value="first">
        <span>If condition matches 'first'</span>
    </Case>
    <Case value="second">
        <span>If condition matches 'second'</span>
    </Case>
</Switch>

Component	Prop	Type	Notes
<Switch />	test	any	The expression to check each case against.
<Case />	value	any	The value to compare against test.

The first matching case is rendered. If multiple cases match, only the first is rendered and and error is reported to the console.

<ForEach />

<ForEach items={ data }
         component={ DataView }
         as="item"
         spread
         keyGen={(item, index) => index}
         rest="wahtever I want" />                  

Prop	Type	Notes
items	any[]	Array of items to pass to the child components
component	React component	The component that will be used to render each item in the items array.
as	string	Optional. Specifies the name of the prop used to pass item to the rendered component. Default is item.
spread	Boolean	Optional. When specified, instead of the item being passed as a single prop to the rendered component, each entry within the item is passed as a separate prop, similar to <Component {...item} />. Note as and spread are mutually exclusive.
keyGen	string or function	Optional. Control over the key for each created child. If a string is passed, then it is assumed to be a property of each item. If a function is passed, it is called for each item with the item and index as arguments and is expected to return a uniue key.
rest	any	Any other props provided to <ForEach /> are passed through to each component instances as-is.

Examples

See the unit tests under tests folder for many usage examples.

License

MIT License