useFrom

Category

@RxJS

Export Size

337 B

Package

@reause/rxjs

Last Changed

5 days ago

Create an Observable from an rxjs ObservableInput — passed straight to RxJS's from() — or from a plain value that re-emits whenever it changes across renders.

Demo

Install

npm i rxjs

Usage

import { useFrom, useObservable } from '@reause/rxjs'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  // emits 0 immediately, then re-emits whenever `count` changes
  const count$ = useFrom(count)
  const [display] = useObservable(count$, { initialValue: 0 })

  return (
    <div>
      <p>
        count$ is:
        {display}
      </p>
      <button onClick={() => setCount(value => value + 1)}>increment</button>
    </div>
  )
}

The returned Observable has a stable identity across renders, so downstream subscriptions are not rebuilt by re-renders. On unmount the underlying subject is completed — subscriptions stop and no further emissions are delivered.

ObservableInput

Passing an rxjs ObservableInput — an Observable, Subject, BehaviorSubject, Promise, iterable, etc. — forwards it to rxjs from() unchanged (upstream parity):

import { useFrom } from '@reause/rxjs'
import { fromEvent } from 'rxjs'

const clicks$ = useFrom(fromEvent(document, 'click'))

Plain value

Any other value is wrapped in a BehaviorSubject seeded with the current render value: subscribing immediately receives the current value, and the Observable re-emits whenever the value changes across renders.

import { useFrom, useSubscription } from '@reause/rxjs'
import { useState } from 'react'

const [count, setCount] = useState(0)
const count$ = useFrom(count)

useSubscription(count$.subscribe((value) => {
  console.log(value)
}))

Only plain values are accepted — never a getter, State<T> or a React ref.

Type Declarations

export function useFrom<T>(value: ObservableInput<T> | T): Observable<T>

Source

Source · Demo

Contributors

Changelog

v0.1.0 on

31839 - feat(rxjs): implement useFrom (#24)