An open API service indexing awesome lists of open source software.

https://github.com/damaera/react-control-statements

Neater control statements (if/for) for react, as a component
https://github.com/damaera/react-control-statements

conditional-statements control-statements for if-else react react-component statement

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README

        

[![npm version](https://img.shields.io/npm/v/react-control-statements.svg?style=flat-square)](https://www.npmjs.com/package/react-control-statements)
[![Build Status](https://travis-ci.org/damaera/react-control-statements.svg?branch=master)](https://travis-ci.org/damaera/react-control-statements)

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](https://www.npmjs.com/package/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.
```jsx
import React, { Component } from 'react'
import { If } from 'react-control-statements'

class YourComponent extends Component {
render() {

Truth

}
}
```

### Choose
This is an alternative syntax for more complex conditional statements.
```jsx
import React, { Component } from 'react'
import { Choose, When, Otherwise } from 'react-control-statements'

class YourComponent extends Component {
render() {
return (




IfBlock


ElseIfBlock
Another ElseIfBlock
...


ElseBlock



);
}
}
```

### For
For syntax.
```jsx
import React, { Component } from 'react'
import { For } from 'react-control-statements'

class YourComponent extends Component {
render() {
return (



$item.title


);
}
}
```