⬅️ Back to Table of Contents

📄 useObservable

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	5
📐 Interfaces	1

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/rxjs/useObservable/index.ts

📦 Imports

Name	Source
Observable	rxjs
Ref	vue
UnwrapRef	vue
tryOnScopeDispose	@vueuse/shared
deepRef	vue

---

Functions

useObservable(observable: Observable<H>, options: UseObservableOptions<I | undefined>): Readonly<Ref<H | I>>

Parameters:

• observable Observable<H>
• options UseObservableOptions<I | undefined>

Returns: Readonly<Ref<H | I>>

Calls:

• deepRef (from vue)
• observable.subscribe
• tryOnScopeDispose (from @vueuse/shared)
• subscription.unsubscribe

Code

export function useObservable<H, I = undefined>(
  observable: Observable<H>,
  options?: UseObservableOptions<I | undefined>,
): Readonly<Ref<H | I>> {
  const value = deepRef<H | I | undefined>(options?.initialValue)
  const subscription = observable.subscribe({
    next: val => (value.value = (val as UnwrapRef<H>)),
    error: options?.onError,
  })
  tryOnScopeDispose(() => {
    subscription.unsubscribe()
  })
  return value as Readonly<Ref<H | I>>
}

---

Interfaces

UseObservableOptions<I>

Interface Code

export interface UseObservableOptions<I> {
  onError?: (err: any) => void
  /**
   * The value that should be set if the observable has not emitted.
   */
  initialValue?: I | undefined
}

Properties

Name	Type	Optional	Description
onError	(err: any) => void	✓	not shown
initialValue	I \| undefined	✓	not shown

---

Generated by Syntax Scribe