Using RxJS with React.js: Part 2— Streaming props to Component

This is the second part of the series.

In this post, we will take a look at how we can stream the output of an Observable as props to a Component.

(Check out FrintJS on GitHub for more documentation on combining the power of RxJS with React)

The base Component

Before going too deep, let’s decide what we want to demonstrate first.

We have a regular React Component accepting interval as a prop, and rendering it:

import React from 'react';
const MyComponent = React.createClass({
  render() {
    const { interval } = this.props;
    return <p>Interval: {interval}</p>;
  }
});

It’s as simple as it can get with the Component. But we want the interval to be updated every second, and the value can come from an RxJS Observable.

Interval Observable

Writing an Observable that emits a value every X milliseconds with RxJS is as simple as:

import { Observable } from 'rxjs';
const interval$ = Observable.interval(1000); // emits every 1 second

Streaming props object to Component

So we have both the base component and our interval observable ready. Now we need to map the observable output, and keep passing a props-compatible object to our component every time the observable emits a new value.

We can visualize the props object over time below:

Illustration of props object in the Component over time

The Higher-Order Component

We can map our initial interval observable as a props compatible object, and pass it to our base component using a higher-order component (HoC).

FrintJS already comes with an HoC called observe which we can use directly in our code:

import { observe } from 'frint-react';
const ObservedComponent = observe(function () {
  const interval$ = Observable.interval(1000);
  return interval$
    .map(function (x) { // `x` is an integer
      return { // mapping it to a props-compatible object
        interval: x
      };
    });
})(MyComponent);

Whenever the new ObservedComponent is rendered, it will keep updating itself with latest interval value, every second.

Now you can keep your Components as small and declarative as possible, while doing the heavy lifting with RxJS from an HoC.

Live Demo

Visit this example in JSBin.