Neverending Pile of Messages
Wondering what’s next for npm?Check out our public roadmap! »

react-control-flow-componentsTypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

react-control-flow-components

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

Build Status

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

Install

npm i react-control-flow-components

DownloadsWeekly Downloads

6

Version

1.1.1

License

MIT

Unpacked Size

16.6 kB

Total Files

24

Last publish

Collaborators

  • avatar