react-use-observable

Use observables with react hooks in an very easy way.

Requirements

• React >= 16.8
• RxJS >= 6

Installation

yarn add react-use-observable

Usage

import React from 'react';
import { useObservable } from 'react-use-observable';
import * as rxjs from 'rxjs';
import { map, startWith } from 'rxjs/operators';

interface IProps {
  start: number;
}

export const Counter: React.FC<IProps> = ({ start }) => {
  const [ value ] = useObservable(() => {
    return rxjs.interval(1000).pipe(
      map(v => v + start),
      startWith(start)
    );
  }, [/* deps */])

  return (
    <p>Started with undefined, value: {value}</p>
  );
}

API

Hook	Return	Description
useObservable(Func, DepsArray)	Value, Error, Completed	Run the observable function on every deps change, the first value will be undefined
useRetryableObservable(Func, DepsArray)	Value, Error, Completed, RetryFunc	Same useObservable, but the last value of return is a retry function to rerun the observable function, useful when an error happens or do a refresh
useMappedObservable(Func, MapFunc, DepsArray)	Value, Error, Completed	Same useObservable, but with a internal map and a distinctUntilChanged, useful to do less renders
useCallbackObservable(Func, DepsArray)	CallbackFunc, Value, Error, Completed	Same useObservable, but the first result is the callbackFunction and run the observable function only when it is called, useful to use in a submit or button's click and keep the unsubscribe on unmount