<commit_before><h1 align="center">react-cond</h1>

<p align="center">

  <a href="#usage">Usage</a> |
  <a href="#license">License</a>
  <br><br>
  <img align="center" src="http://33.media.tumblr.com/cc0170c0a46e44f05347ed5e6197ef4c/tumblr_mv2pp0cnrV1qcung4o1_400.gif">
  <br>
  <sub>logo by <a href="http://justinmezzell.tumblr.com/"><NAME></a></sub>
  <blockquote align="center"><a href="http://www.cis.upenn.edu/~matuszek/LispText/lisp-cond.html">Lisp-Style</a> conditional rendering in react.</blockquote>
  <a href="https://travis-ci.org/stoeffel/react-cond"><img align="center" src="https://travis-ci.org/stoeffel/react-cond.svg?branch=master"></a>
</p>

Make conditional rendering in react simple and expressive. `react-cond` is implemented as a component, which takes n **clauses** as its children. Each **clause** is an array with a **condition** and a component. The first child-component, where the **condition** evaluates to `true` gets rendered in a `Cond` component.

### Before
```jsx
const List = React.createClass({
  // ...
  render() {
    const { isLoading, hasErrors, noSearchResult, items } = this.state;

    return (
      <ul>
        { isLoading? <Spinner />
          : hasErrors? <Error />
          : noSearchResult? <NotingFound />
          : items }
      </ul>
    );
  }
});
```

### After
```jsx
import { Cond, eq, T } from 'react-cond';

const List = React.createClass({
  // ...
  render() {
    const { items } = this.state;

    return (
      <ul>
        <Cond value={this.state}>
          {[ eq('isLoading', true), <Spinner /> ]}
          {[ eq('hasErrors', true), <Error /> ]}
          {[ eq('noSearchResult', true), <NotingFound /> ]}
          {[ T, items ]}
        </Cond>
      </ul>
    );
  }
});
```

## Usage
<p align="center">
  <a href="#installation">Installation</a> |
  <a href="#importing">Importing</a> |
  <a href="#the-component-cond">The Component `Cond`</a> |
  <a href="#clauses">Clauses</a> |
  <a href="#helper-functions">Helper Functions</a>
</p>

### Installation

```
$ npm install --save react-cond
```
<commit_msg>make example even more expressive<commit_after><h1 align="center">react-cond</h1>

<p align="center">

  <a href="#usage">Usage</a> |
  <a href="#license">License</a>
  <br><br>
  <img align="center" src="http://33.media.tumblr.com/cc0170c0a46e44f05347ed5e6197ef4c/tumblr_mv2pp0cnrV1qcung4o1_400.gif">
  <br>
  <sub>logo by <a href="http://justinmezzell.tumblr.com/"><NAME></a></sub>
  <blockquote align="center"><a href="http://www.cis.upenn.edu/~matuszek/LispText/lisp-cond.html">Lisp-Style</a> conditional rendering in react.</blockquote>
  <a href="https://travis-ci.org/stoeffel/react-cond"><img align="center" src="https://travis-ci.org/stoeffel/react-cond.svg?branch=master"></a>
</p>

Make conditional rendering in react simple and expressive. `react-cond` is implemented as a component, which takes n **clauses** as its children. Each **clause** is an array with a **condition** and a component. The first child-component, where the **condition** evaluates to `true` gets rendered in a `Cond` component.

### Before
```jsx
const List = React.createClass({
  // ...
  render() {
    const { isLoading, hasErrors, noSearchResult, items } = this.state;

    return (
      <ul>
        { isLoading? <Spinner />
          : hasErrors? <Error />
          : noSearchResult || items.length <= 0? <NotingFound />
          : items }
      </ul>
    );
  }
});
```

### After
```jsx
import { Cond, eq, T as otherwise } from 'react-cond';

const ifIsLoading = [ eq('isLoading', true), <Spinner /> ];
const ifHasErrors = [ eq('hasErrors', true), <Error /> ];
const ifNoSearchResult = [
  ({ noSearchResult, items }) => noSearchResult || items.length <= 0
  , <NotingFound /> 
];

const List = React.createClass({
  // ...
  render() {
    const { items } = this.state;

    return (
      <ul>
        <Cond value={this.state}>
          {ifIsLoading}
          {ifHasErrors}
          {ifNoSearchResult}
          {[ otherwise, items ]}
        </Cond>
      </ul>
    );
  }
});
```

## Usage
<p align="center">
  <a href="#installation">Installation</a> |
  <a href="#importing">Importing</a> |
  <a href="#the-component-cond">The Component `Cond`</a> |
  <a href="#clauses">Clauses</a> |
  <a href="#helper-functions">Helper Functions</a>
</p>

### Installation

```
$ npm install --save react-cond
```

{'fraction_non_alphanumeric': 0.19162494310423306, 'fraction_numerical': 0.015020482476103778, 'mean_word_length': 3.283625730994152, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 100, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, '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': '4378758', 'n_tokens_mistral': 1586, 'n_tokens_neox': 1507, 'n_words': 324}