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

How many times have you written ternary statements like this in your JSX code? 

```jsx
class YourComponent extends Component {
  render() {
    return (
      <div>
        { loading
          ? <Loading>Loading...</Loading>
          : <Content>
              <div>Content</div>
            </Content>
        }
      </div>
    )
  }
}
```

Ugly? not readable? yes!

There's no built-in conditional syntax in React. This library adds the syntactic sugar to write conditionals as component.
Inspired by [jsx control statements](https://www.npmjs.com/package/jsx-control-statements)

## Install
```
npm install --save react-conditioner
```

## 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-conditioner'

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

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

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>
    );
  }
}
```<commit_msg>change readme<commit_after>[![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() {
    <If condition={ test }>
      <span>Truth</span>
    </If>
  }
}
```

### 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 (
      <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.
```jsx
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>
    );
  }
}
```
{'fraction_non_alphanumeric': 0.14409148665819568, 'fraction_numerical': 0.0010165184243964421, 'mean_word_length': 2.688847235238988, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 69, 'https://': 10, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1905820', 'n_tokens_mistral': 1239, 'n_tokens_neox': 1170, 'n_words': 303}