river-react

River

River is a reactive stream composer for React application.

Influences

River was developed upon RxJS. The goal is to let React developers easily create reactive and composable data layer in Flux style. River was inspired by many Flux flavored libraries, e.g. Redux.

Installation

To install:

npm install --save river-react

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Prerequisite

River assumes developer is familiar with the usage of RxJS. River is merely a set of utility functions to help compose data layer and bind React components to consume the data.

Hello Example

Using React 0.14, RxJS 3.x

import React from 'react';
import ReactDOM from 'react-dom';
import Rx from 'rx';
import { createAction, createStream, subscribe } from 'river-react';

//// Action
let add = createAction(new Rx.Subject());

//// Stream (a.k.a. Store in Flux)
let counterStream = createStream((add) => {
  return add
    .scan((count, _) => count + 1, 0)
    .startWith(0);
})(add);

//// React Component
let Counter = (props) => {
  return <div>{props.counter}</div>;
};

let App = subscribe({counter: counterStream}, Counter);

ReactDOM.render(<App />, node);