Media & time

Clock

The current time, ticking, via `Intl.DateTimeFormat` — no date library.

Client componentSource

Import

import { Clock } from '@the_viveksingh/vivek-ui'

A live clock

Renders a placeholder on the server and hydrates to local time, so the markup never mismatches. Without that a clock is a guaranteed hydration error.

Renders a placeholder on the server and hydrates to the visitor's local time, so the markup never mismatches.

<Clock showSeconds />

Other time zones

Any IANA zone. Formatting goes through Intl, so it is correct per locale.

Mumbai

London

New York

<Clock timeZone="Asia/Kolkata" showSeconds />
<Clock timeZone="Europe/London" showSeconds />
<Clock timeZone="America/New_York" showSeconds hour12 />

Custom format

<Clock format={{ dateStyle: 'full', timeStyle: 'short' }} />
<Clock format={{ hour: '2-digit', minute: '2-digit' }} hour12={false} />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Clock
PropTypeDefaultDescription
timeZonestring—IANA zone, e.g. `'Asia/Kolkata'`. Defaults to the runtime's zone.
formatIntl.DateTimeFormatOptions—`Intl.DateTimeFormat` options. Anything set here wins over the shortcuts below.
showSecondsboolean—Defaults to `true`. Also decides whether the clock ticks every second or every minute.
hour12boolean—Force a 12- or 24-hour clock. Omit to follow the locale.
localestring | string[]——
nowDate | string | number—The clock for the FIRST render, on both sides of hydration. Pass a server timestamp and the server HTML contains a real time that the client reproduces exactly. Omit it and the first render is `placeholder` instead: the component refuses to read the clock during render, because the server renders at one instant and the browser hydrates at another, and React would discard the mismatch. Note that `timeZone` and `locale` are part of that determinism — Node and the browser do not necessarily default to the same ones.
placeholderstring—Shown until the first tick. Defaults to `--:--:--` (or `--:--` without seconds).

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering