use-observable-hooks
    Preparing search index...

    Function useObservable

    Implementation of useObservable.

    • Hook to subscribe to an RxJS Observable.

      Returns the current value of the observable and any error. The value will be undefined until the observable emits its first value, unless the observable is synchronous (like a BehaviorSubject).

      Type Parameters

      • ObservableValue

        The type of the value emitted by the observable.

      • ObservableError = unknown

        The type of the error that can be emitted by the observable. Defaults to unknown.

      Parameters

      • observable: Observable<ObservableValue>

        The RxJS Observable to subscribe to.

      Returns [ObservableValue | undefined, ObservableError | undefined]

      A tuple containing:

      • The latest value emitted by the observable (or undefined).
      • The error emitted by the observable (if any).
      import { useObservable } from 'use-observable-hooks';
      import { interval } from 'rxjs';

      function Timer() {
        const [count] = useObservable(interval(1000));

        return <div>Count: {count ?? 'Loading...'}</div>;
      }

    • Hook to subscribe to an RxJS Observable with pipe operations.

      Type Parameters

      • ObservableValue

        The type of the value emitted by the observable after piping.

      • ObservableError = unknown

        The type of the error that can be emitted by the observable. Defaults to unknown.

      Parameters

      • observable: Observable<any>

        The RxJS Observable to subscribe to.

      • ...operations: OperatorFunction<any, any>[]

        Operator functions to pipe to the observable.

      Returns [ObservableValue | undefined, ObservableError | undefined]

      A tuple containing:

      • The latest value emitted by the observable (or undefined).
      • The error emitted by the observable (if any).
      import { useObservable } from 'use-observable-hooks';
      import { interval } from 'rxjs';
      import { map, filter } from 'rxjs/operators';

      function EvenNumbers() {
        const [evenCount] = useObservable(
          interval(1000),
          filter((n) => n % 2 === 0),
          map((n) => n * 10)
        );

        return <div>Even count x10: {evenCount ?? 'Waiting...'}</div>;
      }

    Settings

    Member Visibility