@visuality.js/react-logic v0.2.1

At a Glance

react-logic library is a set of React components for conditional operators and cycles such as: if, for, for-each, etc.

How to Get Started

If you use NPM, type in terminal:

npm install --save "@visuality.js/react-logic"

If you prefer Yarn, type:

yarn add "@visuality.js/react-logic"

Usage

If Else

import { If, Then, Else } from '@visuality.js/react-logic';

// ...

render = () => {
    return (
        <If true={this.state.coffeeCups > 10}>
            <Then>
                <p>A lot of coffee! ☕</p>
            </Then>
            <Else>
                <p>Need more coffee 😥</p>
            </Else>
        </If>
    );
}

Switch Case

import { Switch, Case, Default } from '@visuality.js/react-logic';

// ...

render = () => {
    return (
        <Switch val={this.state.numberOfYearsInProgramming}>
            <Case val={1}>
                <p>Junior</p>
            </Case>
            <Case val={2}>
                <p>Pre-middle</p>
            </Case>
            <Case val={3}>
                <p>Middle</p>
            </Case>
            <Case val={4}>
                <p>Pre-senior</p>
            </Case>
            <Case val={5}>
                <p>Senior</p>
            </Case>
            <Default>
                <p>Super professional!</p>
            </Default>
        </Switch>
    );
}

For Index

import { ForIndex } from '@visuality.js/react-logic';

// ...

render = () => {
    return (
        <ul>
            <ForIndex from={1} to={10} el={(index) => {
                return (
                    <li>{index}</li>
                );
            }}/>
        </ul>
    );
}

For Each

import { ForEach } from '@visuality.js/react-logic';

// ...

render = () => {
    return (
        <select>
            <ForEach in={names} el={(value, index) => {
                return (
                    <option>{value}</option>
                );
            }}/>
        </select>
    );
}

Repeat

import { Repeat } from '@visuality.js/react-logic';

// ...

render = () => {
    return (
        <table>
            <tr>
                <th>First name</th>
                <th>Second name</th>
            </tr>
            <Repeat times={10}>
                <tr>
                    <td>None</td>
                    <td>None</td>
                </tr>
            </Repeat>
        </table>
    );
}

License

react-logic is available under the Apache 2.0 license. See the LICENSE file for more info.