rcs
react-control-statements
npm i react-control-statements
rcs

react-control-statements

Neater control statements (if/for) for react, as a component

by Lutfi Damaera

2.1.3 (see all)License:MITTypeScript:Not Found
npm i react-control-statements
Readme

npm version Build Status

There's no built-in looping and conditional syntax in React. This library adds the syntactic sugar to write looping and conditionals as component. Inspired by jsx control statements

Install

npm install --save react-control-statements

Usage

If

The body of the if statement only gets evaluated if condition is true.

import React, { Component } from 'react'
import { If } from 'react-control-statements'

class YourComponent extends Component {
  render() {
    <If condition={ test }>
      <span>Truth</span>
    </If>
  }
}

Choose

This is an alternative syntax for more complex conditional statements.

import React, { Component } from 'react'
import { Choose, When, Otherwise } from 'react-control-statements'

class YourComponent extends Component {
  render() {
    return (
      <div>
        <Choose>
          <When condition={ test1 }>
            <span>IfBlock</span>
          </When>
          <When condition={ test2 }>
            <span>ElseIfBlock</span>
            <span>Another ElseIfBlock</span>
            <span>...</span>
          </When>
          <Otherwise>
            <span>ElseBlock</span>
          </Otherwise>
        </Choose>
      </div>
    );
  }
}

For

For syntax.

import React, { Component } from 'react'
import { For } from 'react-control-statements'

class YourComponent extends Component {
  render() {
    return (
      <div>
        <For each="$item" of={ this.props.items }>
          <span key="$item.id">$item.title</span>
        </For>
      </div>
    );
  }
}

Downloads/wk

35

GitHub Stars

11

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
2.1.3
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate