useTimeout

Reactive boolean that becomes true after a given delay

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

Demo

Timeout

Waiting

Ready becomes true after 1 second.

Start Again

Usage

Hook

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

function Component() {
  const ready$ = useTimeout(1000);
  return <div>{ready$.get() ? "Ready!" : "Waiting..."}</div>;
  // ready$.get() === false while waiting
  // ready$.get() === true after 1000ms
}

Scope

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

function Component() {
  "use scope"
  const ready$ = createTimeout(1000);
  return <div>{ready$.get() ? "Ready!" : "Waiting..."}</div>;
  // ready$.get() === false while waiting
  // ready$.get() === true after 1000ms
}

With callback

Hook

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

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

Scope

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

function Component() {
  "use scope"
  createTimeout(500, {
    callback: () => console.log("done!"),
  });
}

With stop/start controls

Hook

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

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

  // stop()  → cancel the pending timeout
  // start() → restart the timer
}

Scope

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

function Component() {
  "use scope"
  const { ready$, isPending$, stop, start } = createTimeout(1000, { controls: true });

  // stop()  → cancel the pending timeout
  // start() → restart the timer
}

Manual start (immediate: false)

Hook

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

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

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

Scope

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

function Component() {
  "use scope"
  const { ready$, start } = createTimeout(1000, {
    controls: true,
    immediate: false,
  });

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

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

Parameters

Parameter	Type	Description
interval	MaybeObservable<number>	-
options	TimeoutOptions & { controls: true; }	-

TimeoutOptions

Option	Type	Default	Description
controls	boolean	-	-
callback	Fn	-	Callback invoked on timeout completion
immediate	boolean	true	Auto-start immediately.

Returns

TimeoutReturn & Stoppable<any[]>

Name	Type	Description
ready$	ObservableBoolean<boolean>	-
isPending$	ObservableBoolean<boolean>	-
stop	Fn	-
start	(...args: any[]) => void	-

Source

View on GitHub