https://github.com/caferrari/react-use-observable

Use observables with react hooks
https://github.com/caferrari/react-use-observable

observable react react-hooks rxjs

Last synced: 3 months ago
JSON representation

Use observables with react hooks

• Host: GitHub
• URL: https://github.com/caferrari/react-use-observable
• Owner: caferrari
• Created: 2019-06-13T12:13:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T23:13:23.000Z (over 1 year ago)
• Last Synced: 2024-09-20T03:18:15.425Z (4 months ago)
• Topics: observable, react, react-hooks, rxjs
• Language: TypeScript
• Size: 148 KB
• Stars: 9
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-use-observable

Use observables with react hooks in an very easy way.

## Requirements

* React >= 16.8

* RxJS >= 6

## Installation

```bash

yarn add react-use-observable

```

## Usage

```js

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 = ({ start }) => {

  const [ value ] = useObservable(() => {

    return rxjs.interval(1000).pipe(

      map(v => v + start),

      startWith(start)

    );

  }, [/* deps */])

  return (

    
Started with undefined, value: {value}

  );

}

```


## 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 |