react-control-statements
v2.1.3
Published
Neater control statements (if/for) for react, as a component
Downloads
40
Maintainers
Readme
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>
);
}
}