Skip to content

caferrari/react-use-observable

Repository files navigation

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