cycle-react

Cycle-React

An RxJS functional interface to Facebook's React.

Cycle-React allows users to write React applications in functional style and represents their UIs as Observables. In addition, Cycle-React is immutable and uses PureRenderMixin internally by default.

Additionally, Cycle-React is also a React-style implementation of a beautiful framework called Cycle.js.

Installing

npm install cycle-react

Example

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

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

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

The input of the computer is interactions, a collection containing all user interaction events happening on the user-defined event handlers on the DOM, which you can query using interactions.get(eventName). And the event handler can be defined by interactions.listener(eventName).

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.

You can learn more about the concept behind applyToDOM and Cycle from André's amazing presentation: "What if the user was a function?"

React component example

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

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

let Timer = Cycle.component('Timer', function () {
  return Rx.Observable.interval(1000).map(i =>
    <Counter counter={i} />
  );
});

Cycle.applyToDOM('.js-container', Timer);
// or
// React.render(
//   React.createElement(Timer),
//   document.querySelector('.js-container'));

Learn more

Cycle-React is a React-style implementation of Cycle.js, so we have the same concept of handling user interactions. More information of this concept can be found at: http://cycle.js.org/

Cycle.js Driver

The original Cycle.js has the driver architecture starting from v0.23. Cycle-React provides a DOM driver(powered by React, of course) for Cycle.js.

Details can be found at "Using Cycle-React's DOM driver for Cycle.js".

FAQ

Can I use Cycle-React with react-hot-loader?

Yes. And no extra configuration needed.

Example

Can I use Cycle-React with other React components and libraries?

Yes. You can even use Cycle-React with your current React apps. Because component creates the native React component for you.

Examples for integrating Cycle-React with other libraries are work in progress.

Meanwhile, See "Working with React" for guidelines.

Run examples

npm run examples starts an HTTP server that shows examples

Community

• Ask "how do I...?" questions in Cycle-React's Gitter:
  
• Propose and discuss significant changes as a GitHub issues
• In addition, more resources can be found at the official website of Cycle.js

License

The MIT License