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 |