Timer

A component used to manage and display time-based counts or countdowns.

Usage

The Timer component consists of a root container and several subcomponents to manage and display time units and controls.

import { Timer } from "@elemnts-ui/react";

<Timer.Root startMs={60 * 60 * 1000}>
  <Timer.Area>
    <Timer.ItemGroup>
      <Timer.Item type="hours" />
      <Timer.ItemLabel>Hours</Timer.ItemLabel>
    </Timer.ItemGroup>
    <Timer.Separator>:</Timer.Separator>
    <Timer.ItemGroup>
      <Timer.Item type="minutes" />
      <Timer.ItemLabel>Minutes</Timer.ItemLabel>
    </Timer.ItemGroup>
    <Timer.Separator>:</Timer.Separator>
    <Timer.ItemGroup>
      <Timer.Item type="seconds" />
      <Timer.ItemLabel>Seconds</Timer.ItemLabel>
    </Timer.ItemGroup>
  </Timer.Area>
  <Timer.Control>
    <Timer.ActionTrigger action="start">Start</Timer.ActionTrigger>
    <Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
  </Timer.Control>
</Timer.Root>;

Countdown

Set the countdown prop on the Root component to decrement the timer.

API Reference

TimerRoot

The root component that manages timer state.

Prop	Type	Default
asChild	`boolean`	`false`
autoStart	`boolean`	-
countdown	`boolean`	-
ids	`Partial<{ root: string; area: string }>`	-
interval	`number`	`1000`
onComplete	`() => void`	-
onTick	`(details: TickDetails) => void`	-
startMs	`number`	-
targetMs	`number`	-
translations	`IntlTranslations`	-

TimerRootProvider

Provides timer state created with useTimer to its descendants.

Prop	Type	Default
value	`UseTimerReturn`	required
asChild	`boolean`	`false`

TimerArea

Wraps the displayed timer items.

Prop	Type	Default
asChild	`boolean`	`false`

TimerItem

Displays a formatted unit of time.

Prop	Type	Default
type	`keyof Time<number>`	required
asChild	`boolean`	`false`

TimerItemGroup

Groups a timer item with its label.

Prop	Type	Default
asChild	`boolean`	`false`

TimerItemLabel

Labels a timer item.

Prop	Type	Default
asChild	`boolean`	`false`

TimerSeparator

Separates timer items.

Prop	Type	Default
asChild	`boolean`	`false`

TimerControl

Wraps timer action controls.

Prop	Type	Default
asChild	`boolean`	`false`

TimerActionTrigger

Triggers an action on the timer.

Prop	Type	Default
action	`TimerAction`	required
asChild	`boolean`	`false`