Visuality-js/react-logic


React components for conditional operators and cycles

License: Apache-2.0

Language: TypeScript

Keywords: javascript, react, react-component-library, reactjs, typescript


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.

Project Statistics

Sourcerank 4
Repository Size 19.5 KB
Stars 5
Forks 0
Watchers 0
Open issues 0
Dependencies 20
Contributors 1
Tags 3
Created
Last updated
Last pushed

Top Contributors See all

Igor Matyushkin

Packages Referencing this Repo

@visuality.js/react-logic
React components that improve app's logic.
Latest release 0.2.0 - Updated - 5 stars

Recent Tags See all

0.2.0 December 13, 2019
0.1.1 December 12, 2019
0.1.0 December 12, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-12-13 13:23:01 UTC

Login to resync this repository