useInterval

Reactive counter that increments on every interval tick

A thin wrapper around useIntervalFn that exposes a ReadonlyObservable<number> counter that increments on each tick.

Demo

Interval Counter

Counter increments every 200ms.

Interval fired

0

Usage

Hook

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

function Component() {
  const counter = useInterval(1000);
  return <div>{counter.get()}</div>;
  // counter.get() → 0 initially, then 1, 2, 3... every second
}

Scope

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

function Component() {
  "use scope"
  const counter = createInterval(1000);
  return <div>{counter.get()}</div>;
  // counter.get() → 0 initially, then 1, 2, 3... every second
}

With callback

Hook

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

function Component() {
  useInterval(1000, {
    callback: (count) => console.log("tick:", count),
  });
}

Scope

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

function Component() {
  "use scope"
  createInterval(1000, {
    callback: (count) => console.log("tick:", count),
  });
}

With pause/resume/reset controls

Hook

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

function Component() {
  const { counter$, reset, isActive$, pause, resume } = useInterval(1000, {
    controls: true,
  });

  // pause()  → stops ticking
  // resume() → restarts
  // reset()  → counter → 0
}

Scope

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

function Component() {
  "use scope"
  const { counter$, reset, isActive$, pause, resume } = createInterval(1000, {
    controls: true,
  });

  // pause()  → stops ticking
  // resume() → restarts
  // reset()  → counter → 0
}

Manual start (immediate: false)

Hook

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

function Component() {
  const { counter$, resume } = useInterval(1000, {
    controls: true,
    immediate: false,
  });

  // resume() → start manually
}

Scope

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

function Component() {
  "use scope"
  const { counter$, resume } = createInterval(1000, {
    controls: true,
    immediate: false,
  });

  // resume() → start manually
}

Reactive interval

Hook

import { observable, useInterval } from "@usels/web";

function Component() {
  const ms$ = observable(1000);
  const counter = useInterval(ms$);

  // ms$.set(500) → restarts with 500ms period
}

Scope

import { createInterval, observable } from "@usels/web";

function Component() {
  "use scope"
  const ms$ = observable(1000);
  const counter = createInterval(ms$);

  // ms$.set(500) → restarts with 500ms period
}

Type

Parameters

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

IntervalOptions

Option	Type	Default	Description
controls	boolean	-	Expose pause/resume/reset controls — mount-time-only
immediate	boolean	true	If true, starts immediately.
callback	((count: number) => void)	-	Callback invoked on every tick (receives current counter value)

Returns

IntervalReturn & Pausable

Name	Type	Description
counter$	ObservablePrimitive<number>	-
reset	Fn	-
isActive$	ReadonlyObservable<boolean>	-
pause	Fn	-
resume	Fn	-

Source

View on GitHub