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

``bash
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

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

export default function Example() {
return (



)
}
`

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

`bash
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.