Timer

useNow

Reactive current Date that auto-updates on every animation frame or interval

Returns a ReadonlyObservable<Date> that reflects the current time, updated continuously via requestAnimationFrame (default) or a fixed interval.

Demo

Current Time

Updates every frame via requestAnimationFrame.

4/19/2026, 8:52:30 AM

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

function 
function Component(): JSX.Element
Component() {
  const 
const now: any
now = 
import useNow
useNow();
  return <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>{
const now: any
now.
any
get().
any
toLocaleTimeString()}</
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>;
  // now.get() → current Date, updated every frame
}

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

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

Interval-based (battery friendly)

Hook
Scope

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

function Component() {
  const now = useNow({ interval: 1000 }); // updates every second
}

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

function Component() {
  "use scope"
  const { now$ } = createNow({ interval: 1000 }); // updates every second
}

With pause/resume controls

Hook
Scope

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

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

  // pause()  → stops auto-update
  // resume() → restarts
}

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

function Component() {
  "use scope"
  const { now$, isActive$, pause, resume } = createNow();

  // pause()  → stops auto-update
  // resume() → restarts
}

Notes

Scheduler selection

The scheduler is chosen once at mount and cannot be changed dynamically:

`interval` value	Scheduler
`'requestAnimationFrame'` (default)	`useRafFn` — smooth, ~60fps
`number` (ms)	`useIntervalFn` — battery-friendly

Type

export { createNow } from "./core";
export type { NowOptions } from "./core";
export interface UseNowOptions<Controls extends boolean = false> {
    /**
     * Whether to expose controls (pause/resume) — mount-time-only
     * @default false
     */
    controls?: Controls;
    /**
     * Update interval — mount-time-only (determines scheduler type)
     * - 'requestAnimationFrame': rAF-based (default, smoother)
     * - number: ms-based setInterval (battery friendly)
     * @default 'requestAnimationFrame'
     */
    interval?: "requestAnimationFrame" | number;
}
export declare function useNow(options?: UseNowOptions<false>): ReadonlyObservable<Date>;
export declare function useNow(options: UseNowOptions<true>): {
    now$: ReadonlyObservable<Date>;
} & Pausable;

Source

View on GitHub