1.2.1 • Published 2 months ago
react-control-flow-components v1.2.1
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-componentsDocumentation
<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.