<commit_before># Cycle-React

[![Build Status](https://travis-ci.org/pH200/cycle-react.svg?branch=master)](https://travis-ci.org/pH200/cycle-react)

An [RxJS](https://github.com/Reactive-Extensions/RxJS) functional interface
to [Facebook's React](http://facebook.github.io/react/).

Cycle-React allows users to write [React](https://github.com/facebook/react)
applications in functional style and represents their UIs as Observables.
In addition, Cycle-React is immutable and uses
[PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html)
internally by default.

Additionally, Cycle-React is also a React-style implementation of a beautiful
framework called [Cycle.js](https://github.com/staltz/cycle).

## Installing

```
npm install cycle-react
```

## Example

```js
let Cycle = require('cycle-react');
let React = Cycle.React;

function computer(interactions) {
  return interactions.get('.myinput', 'input')
    .map(ev => ev.target.value)
    .startWith('')
    .map(name =>
      <div>
        <label>Name:</label>
        <input className="myinput" type="text"></input>
        <hr />
        <h1>Hello {name}</h1>
      </div>
    );
}

Cycle.applyToDOM('.js-container', computer);
```

The input of the `computer` is `interactions`, a collection containing all
possible user interaction events happening on elements on the DOM, which you
can query using `interactions.get(selector, eventType)`.

The output of the `computer` is `Observable<ReactElement>`
(a reactive sequence of elements, in other words, view).

Function `applyToDOM` subscribes that Observable of elements and renders the
elements to DOM, by using `React.createClass` and `React.render` internally.

Notice that although `React.createClass` is mentioned here, you don't have to
use it. That's why Cycle-React was made. We took functions over classes
and mutable states.

The description of the concept behind `applyToDOM` and `Cycle` can be found at
[Cycle.js](https://github.com/staltz/cycle/tree/v0.22.0) README.

## Custom element example

```js
let Cycle = require('cycle-react');
let React = Cycle.React;
let Rx = Cycle.Rx;

// "createReactClass" returns a native react class which can be used normally
// by "React.createElement" and "Cycle.applyToDOM".
let CounterText = Cycle.createReactClass('CounterText',
  function (interactions, props) {
    return props.get('counter')
      .map(counter => <h3>Seconds Elapsed: {counter}</h3>);
  }
);

let Timer = Cycle.createReactClass('Timer', function () {
  return Rx.Observable.interval(1000).map(i =><commit_msg>Small update to README examples<commit_after># Cycle-React

[![Build Status](https://travis-ci.org/pH200/cycle-react.svg?branch=master)](https://travis-ci.org/pH200/cycle-react)

An [RxJS](https://github.com/Reactive-Extensions/RxJS) functional interface
to [Facebook's React](http://facebook.github.io/react/).

Cycle-React allows users to write [React](https://github.com/facebook/react)
applications in functional style and represents their UIs as Observables.
In addition, Cycle-React is immutable and uses
[PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html)
internally by default.

Additionally, Cycle-React is also a React-style implementation of a beautiful
framework called [Cycle.js](https://github.com/staltz/cycle).

## Installing

```
npm install cycle-react
```

## Example

```js
let Cycle = require('cycle-react');
let React = require('react');

function computer(interactions) {
  return interactions.get('.myinput', 'input')
    .map(ev => ev.target.value)
    .startWith('')
    .map(name =>
      <div>
        <label>Name:</label>
        <input className="myinput" type="text"></input>
        <hr />
        <h1>Hello {name}</h1>
      </div>
    );
}

Cycle.applyToDOM('.js-container', computer);
```

The input of the `computer` is `interactions`, a collection containing all
possible user interaction events happening on elements on the DOM, which you
can query using `interactions.get(selector, eventType)`.

The output of the `computer` is `Observable<ReactElement>`
(a reactive sequence of elements, in other words, view).

Function `applyToDOM` subscribes that Observable of elements and renders the
elements to DOM, by using `React.createClass` and `React.render` internally.

Notice that although `React.createClass` is mentioned here, you don't have to
use it. That's why Cycle-React was made. We took functions over classes
and mutable states.

The description of the concept behind `applyToDOM` and `Cycle` can be found at
[Cycle.js](https://github.com/staltz/cycle/tree/v0.22.0) README.

## Custom element example

```js
let Cycle = require('cycle-react');
let React = require('react');
let Rx = Cycle.Rx;

// "createReactClass" returns a native react class which can be used normally
// by "React.createElement" and "Cycle.applyToDOM".
let CounterText = Cycle.createReactClass('CounterText',
  function (interactions, props) {
    return props.get('counter')
      .map(counter => <h3>Seconds Elapsed: {counter}</h3>);
  }
);

let Timer = Cycle.createReactClass('Timer', function () {
  return Rx.Observable.interval(1000).map(i =>
{'fraction_non_alphanumeric': 0.1348314606741573, 'fraction_numerical': 0.006974041069352964, 'mean_word_length': 4.4519535374868004, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 35, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6008902', 'n_tokens_mistral': 1622, 'n_tokens_neox': 1565, 'n_words': 470}