useTimestamp

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

Demo

Timestamp: 1772791259743

Updates every frame via requestAnimationFrame.

Usage

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

const ts = useTimestamp();
// ts.get() → current Date.now(), updated every frame

With offset

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

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

With callback

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

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

With pause/resume controls

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

const { timestamp$, isActive$, pause, resume } = useTimestamp({ 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 Declarations

export interface UseTimestampOptions<Controls extends boolean = false> {
    controls?: Controls;
    offset?: number;
    interval?: "requestAnimationFrame" | number;
    callback?: (timestamp: number) => void;
}
export declare function useTimestamp(options?: UseTimestampOptions<false>): ReadonlyObservable<number>;
export declare function useTimestamp(options: UseTimestampOptions<true>): {
    timestamp$: ReadonlyObservable<number>;
} & Pausable;

Source

View on GitHub

Contributors

• tigerwest

Changelog

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