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 = 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 README.

Custom element example

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 =>
    <CounterText counter={i} />
  );
});

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

You can use h and without JSX just like you did in Cycle.js. This was made possible by react-hyperscript. The example.

But you said no classes

createReactClass transforms your computer() function into a ReactClass. So, you get a ReactClass but without writing a class definition. The point is that ReactClass is a function indeed and it should always be used as a function object, because you don't new, extends or this to access properties. In fact, we don't want you to do that.

Apps written in Cycle-React are this-less. You won't find a single this in the examples.

Learn more

Cycle-React shares the same API as Cycle.js, except of doing custom elements. A more comprehensive README can be found at https://github.com/staltz/cycle

Cycle.js Driver

Starting from Cycle.js v0.23, the driver architecture has been introduced. 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 createReactClass creates the native ReactClass for you.

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

Meanwhile, See "Working with React" for guidelines.

Build standalone js

npm run dist

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 Cycle.js' page

Disclaimer

Work in progress

Just like Cycle.js, changes to API will occur before 1.0.

Changelog

0.26.0

Breaking change: Cycle v0.23(or v1.0 API) compatibility changes

BEFORE

var MyComponent = CycleReact.createReactClass('MyComponent',
  function (interactions, props) {
    var destroy$ = interactions.get('.remove-btn', 'click');
    var id$ = props.get('itemid');
    // ...
    return {
      vtree$: Rx.Observable.just(<h3>view</h3>),
      destroy$: destroy$,
      changeColor$: changeColor$,
      changeWidth$: changeWidth$
    };
  }
);

// Event handler usage
// See docs/interactions.md
<MyComponent onChangeColor$={interactions.subject('onChangeColor').onEvent} />

AFTER

var MyComponent = CycleReact.createReactClass('MyComponent',
  function (interactions, props) {
    var destroy$ = interactions.get('.remove-btn', 'click');
    var id$ = props.get('itemid');
    // ...
    return {
      view: Rx.Observable.just(<h3>view</h3>),
      events: {
        destroy: destroy$,
        changeColor: changeColor$,
        changeWidth: changeWidth$
      }
    };
  }
);

// Event handler usage
// See docs/interactions.md
<MyComponent onChangeColor={interactions.subject('onChangeColor').onEvent} />

Migration

1. Replace the return of the definition function from return {vtree$, myEvent$, ...} to return {view: vtree$, events: ...}, where events: ... is an object where keys are the event name (notice no more dollar sign $ convention!) and values are Observables
2. Remove the $ sign from event handlers
3. You're good to go

Unlike Cycle.js 0.23 which interactions and props are replaced by drivers, Cycle-React keeps these parameters because Cycle-React allows you to create React components outside the context of Cycle.run.

Additionally, Cycle-React will keep applyToDOM and renderAsHTML for simple web-app development usage.

Add feature: Cycle.js driver

See docs/cycle-js-driver.md for details.