useTimeout

A thin wrapper around useTimeoutFn that exposes a ReadonlyObservable<boolean> (ready$) that flips to true when the timeout completes.

Demo

Ready: false

Start Again

Ready becomes true after 1 second.

Usage

import { useTimeout } from "@usels/web";

const ready$ = useTimeout(1000);
// ready$.get() === false while waiting
// ready$.get() === true after 1000ms

With callback

import { useTimeout } from "@usels/web";

useTimeout(500, {
  callback: () => console.log("done!"),
});

With stop/start controls

import { useTimeout } from "@usels/web";

const { ready$, isPending$, stop, start } = useTimeout(1000, { controls: true });

stop(); // cancel the pending timeout
start(); // restart the timer

Manual start (immediate: false)

import { useTimeout } from "@usels/web";

const { ready$, start } = useTimeout(1000, {
  controls: true,
  immediate: false,
});

// call start() when you're ready
start();

Notes

ready$ vs isPending$

Observable	Meaning
ready$	true when timeout has fired
isPending$ (controls only)	true while timeout is still waiting

They are inverses: ready$ = !isPending$.

Reactive interval

Pass an Observable<number> as the first argument and useTimeoutFn will read the latest value each time start() is called.

Type Declarations

export interface UseTimeoutOptions<Controls extends boolean = false> {
    controls?: Controls;
    callback?: Fn;
    immediate?: boolean;
}
export declare function useTimeout(interval?: MaybeObservable<number>, options?: UseTimeoutOptions<false>): ReadonlyObservable<boolean>;
export declare function useTimeout(interval: MaybeObservable<number>, options: UseTimeoutOptions<true>): {
    ready$: ReadonlyObservable<boolean>;
} & Stoppable;

Source

View on GitHub

Contributors

• tigerwest

Changelog

• a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)