react-rxjs-toolbox

Set of hooks for better DX with React+RxJs

Documentation

https://react-rxjs-toolbox.vercel.app

Installation

npm install react-rxjs-toolbox

Overview

useObservable

Used to read observable values inside React components

import { useObservable } from 'react-rxjs-toolbox';
import { interval } from 'rxjs'

// any observable
const observable$ = interval(1000)

const Component = () => {
  // use value of observable
  const value = useObservable(observable$);
  // value: number | undefined

  // pass default value
  const value = useObservable(observable$, 0); 
  // value: number
}

useObservableState

Used with BehaviorSubject for useState-like manipulations

import { useObservableState } from 'react-rxjs-toolbox';
import { BehaviorSubject } from 'rxjs';

// any observable
const search$ = new BehaviorSubject('')

const Component = () => {
  const [search, setSearch] = useObservableState(search$)

  setSearch('14')
  // or pass updater function
  setSearch(current => current.toLowerCase())
}

useSubscription

const search$ = new BehaviorSubject('')

const Component = () => {
  // short form (only next)
  useSubscription(search$, (search) => console.log(search))

  // all callbacks
  useSubscription(search$, {
    next: (search) => console.log('next': search),
    complete: () => console.log('complete'),
    error: (err) => console.log('error', err),
  })
}

useDerivedValue

const search$ = new BehaviorSubject('search')

const Component = () => {

  const upper = useDerivedValue(search$, (search) => search.toUpperCase())

  // ================================   

  const [count, increment] = useReducer((count) => count + 1, 0)

  // This will updates only when new observable value is emitted
  // producer function with actual `count` will be used
  const searchWithCount = useDerivedValue(search$, (search) => {
    return search + " " + count
  })
}

:::warning Derived value WILL ONLY be updated when new observable value is emitted.
Changing the producer function will not affect derived value immediately. :::

useDistinctDerivedValue

The same as useDerivedValue but with distinctUntilChanged rxjs operator.

const search$ = new BehaviorSubject('')

const Component = () => {
  const length = useDerivedValue(search$, (search) => search.length)

  // @example
  // search$.next('123') => new value (3) will be emitted
  // search$.next('1234') => new value (4) will be emitted
  // search$.next('4321') => new value WILL NOT be emitted. 
  // Length did not change.
}