React Adaptable Clock

Lightweight React clock component with analog and multiple digital appearances (standard, retro, flip, lamp/nixie), timezone selection, and ready-to-use themes. Built with TypeScript, bundled via tsup, and demoed with Vite.

react-adaptable-clock

Features

• Analog face plus four digital styles: standard, retro, flip-card, and lamp/nixie.
• 12h or 24h display for digital variants.
• Timezone selection (defaults to the browser guess) powered by dayjs with timezone support.
• Five curated themes (dawn, dusk, midnight, forest, mono) plus direct style overrides.
• Small bundle surface (dayjs + clsx) with React marked as a peer dependency.

Installation

yarn add react-adaptable-clock
# peer deps
yarn add react react-dom
# or npm/pnpm if you prefer

dayjs ships with the package, so no extra install is required.

Quick start

import { ReactClock } from 'react-adaptable-clock'

export default function Example() {
  return (
    <div style={{ display: 'grid', gap: 24 }}>
      <ReactClock variant="analog" theme="forest" timeZone="Europe/Warsaw" size={260} />
      <ReactClock variant="digital-retro" hourCycle={12} theme="mono" showSeconds={false} />
      <ReactClock variant="digital-flip" hourCycle={24} theme="dusk" timeZone="America/Los_Angeles" />
      <ReactClock variant="digital-lamp" hourCycle={24} theme="midnight" showSeconds />
    </div>
  )
}

Props

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | variant | analog | digital | digital-retro | digital-flip | digital-lamp | analog | Pick the rendering style. | | hourCycle | 12 | 24 | 24 | Applies to digital variants. | | timeZone | string | Browser guess | Any IANA timezone. | | showSeconds | boolean | true | Toggle seconds on digital/analog. | | size | number | 260 | Base pixel size of the component. | | theme | ClockTheme | dawn | One of dawn, dusk, midnight, forest, mono. | | style | CSSProperties | {} | Inline style overrides. | | className | string | undefined | Optional class for the wrapper. | | tickInterval | number | 1000 | Update interval in milliseconds. | | onTick | (date: Date) => void | undefined | Callback invoked on each tick. | | showSecondMarkers | boolean | false | (Analog) Show 60 small markers for seconds. | | secondMarkerScale | number | 1 | (Analog) Scale of second markers when enabled. | | analogStyles | AnalogElementStyles | undefined | (Analog) Per-element style overrides (dial, markers, hands, cap).

Timezone handling

The clock uses dayjs.tz with the timezone plugin. If no timeZone prop is provided, it falls back to dayjs.tz.guess() to align with the user’s system/browser setting.

Development

yarn dev       # run the Vite demo
yarn build     # bundle the library with tsup (ESM + CJS + dts)
yarn typecheck # TypeScript type checking
yarn lint      # ESLint

Publishing

• Update name, version, description, and author in package.json as needed.
• Ensure dist/ is generated via yarn build before publishing with your package manager of choice.