useTimestamp

Reactive Unix timestamp (ms) that auto-updates on every animation frame or interval

Returns a ReadonlyObservable<number> containing the current Unix timestamp in milliseconds, updated continuously via requestAnimationFrame (default) or a fixed interval.

Demo

Timestamp

Updates every frame via requestAnimationFrame.

Timestamp

1776588750404

Usage

Hook

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

function Component() {
  const ts = useTimestamp();
  return <div>{ts.get()}</div>;
  // ts.get() → current Date.now(), updated every frame
}

Scope

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

function Component() {
  "use scope"
  const ts = createTimestamp();
  return <div>{ts.get()}</div>;
  // ts.get() → current Date.now(), updated every frame
}

With offset

Hook

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

function Component() {
  const offset$ = observable(5000);
  const ts = useTimestamp({ offset: offset$ });
  // ts.get() → Date.now() + 5000 — offset is reactive, updates each tick
}

Scope

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

function Component() {
  "use scope"
  const ts = createTimestamp({ offset: observable(5000) });
  // ts.get() → Date.now() + 5000 — offset is reactive, updates each tick
}

With callback

Hook

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

function Component() {
  const ts = useTimestamp({
    callback: (timestamp) => {
      console.log("tick:", timestamp);
    },
  });
}

Scope

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

function Component() {
  "use scope"
  const ts = createTimestamp({
    callback: (timestamp) => {
      console.log("tick:", timestamp);
    },
  });
}

With pause/resume controls

Hook

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

function Component() {
  const { timestamp$, isActive$, pause, resume } = useTimestamp({ controls: true });
}

Scope

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

function Component() {
  "use scope"
  const { timestamp$, isActive$, pause, resume } = createTimestamp({ controls: true });
}

Notes

Reactive offset

offset is read on every tick inside the update loop, so changing it (via Observable) takes effect on the next frame without restarting the scheduler.

Type

Parameters

Parameter	Type	Description
options	TimestampOptions & { controls: true; }	-

TimestampOptions

Option	Type	Default	Description
controls	boolean	-	Expose pause/resume controls — mount-time-only
offset	number	0	Offset (ms) added to the timestamp on every tick — reactive
interval	number | "requestAnimationFrame"	'requestAnimationFrame'	Update interval — determines scheduler type. - ‘requestAnimationFrame’: rAF-based (default, smoother) - number: ms-based setInterval (battery friendly)
callback	((timestamp: number) => void)	-	Callback invoked on every update

Returns

Pausable & { timestamp$: ObservablePrimitive<number>; }

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

Source

View on GitHub