react-observable-mixin

react-observable-mixin

Container like observable mixin for ReactJS.

Install

npm install react-observable-mixin

Usage

import React from 'react';
import {ObservablePropTypes, RxObservableMixin} from 'react-observable-mixin';

export default React.createClass({
  mixins: [RxObservableMixin],

  propTypes: {
    name$: ObservablePropTypes.observable,
    lastName$: ObservablePropTypes.observable
  },

  render() {
    return <span>{this.state.name || ''} {this.state.lastName || ''}</span>;
  }
});

Mixins

RxObservableMixin

This mixin automatically subscribes to props that are observables ($ at the end and a method subscribe). When the observable emits a new value, the value is automatically injected in the state.

mixins: [RxObservableMixin]

componentWillReceiveStateFromObservables(state)

You can implement this method and it will be called when a value is received from observable and that the state will be updated.

componentWillReceiveStateFromObservables(nextState) {
  console.log(nextState.name); // new value
  console.log(this.state.name); // previous value
}

componentWillReceiveErrorFromObservables(error)

You can implement this method and it will be called when an error is emitted from an observable.

componentWillReceiveErrorFromObservables(error) {
  throw error; // Throw error emitted from an observable
}

PropTypes

ObservablePropTypes.observable

A validator for Rx.Observable instance.

propTypes() {
  return {
    name$: ObservablePropTypes.observable
  };
}

License

MIT