@clock-ui/react

React components for Clock UI, providing live and static clock widgets built with React and hooks for reactive time updates.

Installation

# npm
npm install @clock-ui/react

# yarn
yarn add @clock-ui/react

# pnpm
pnpm add @clock-ui/react

# bun
bun add @clock-ui/react

Usage

LiveClock

A live clock component that updates in real-time.

import { LiveClock } from "@clock-ui/react";

function App() {
  return (
    <div>
      <LiveClock />
    </div>
  );
}

BaseClock

A static clock component for displaying specific times.

import { BaseClock } from "@clock-ui/react";

function App() {
  return (
    <div>
      <BaseClock hours={3} minutes={30} seconds={45} />
    </div>
  );
}

Components

LiveClock

A real-time clock component that automatically updates.

Props

| Prop | Type | Default | Description | | ---------------- | --------- | ------- | ------------------------------------------ | | smoothSweep | boolean | false | Enables smooth second hand movement | | timezone | string | - | Timezone string (e.g., 'America/New_York') | | hideDate | boolean | false | Hides date display | | hideSeconds | boolean | false | Hides the second hand | | hideNumbers | boolean | false | Hides hour numbers | | useRoman | boolean | false | Uses Roman numerals instead of Arabic | | cardinalOnly | boolean | false | Shows only cardinal numbers (3, 6, 9, 12) | | noBorder | boolean | false | Removes clock border | | hideTicks | boolean | false | Hides all tick marks | | hideMajorTicks | boolean | false | Hides major tick marks | | hideMinorTicks | boolean | false | Hides minor tick marks | | dualTone | boolean | true | Enables dual-tone styling |

BaseClock

A static clock component for displaying specific times.

Props

| Prop | Type | Default | Description | | ---------------- | --------- | ------- | ----------------------------------------- | | hours | number | - | Hour (0-23) | | minutes | number | - | Minutes (0-59) | | seconds | number | 0 | Seconds (0-59) | | milliseconds | number | 0 | Milliseconds (0-999) | | hideSeconds | boolean | false | Hides the second hand | | hideNumbers | boolean | false | Hides hour numbers | | useRoman | boolean | false | Uses Roman numerals instead of Arabic | | cardinalOnly | boolean | false | Shows only cardinal numbers (3, 6, 9, 12) | | noBorder | boolean | false | Removes clock border | | hideTicks | boolean | false | Hides all tick marks | | hideMajorTicks | boolean | false | Hides major tick marks | | hideMinorTicks | boolean | false | Hides minor tick marks | | dualTone | boolean | true | Enables dual-tone styling |

Styling

The components use CSS custom properties for theming. Import the CSS file to apply default styles:

import "@clock-ui/react/base.css";

Examples

Different Timezones

<LiveClock timezone="America/New_York" />
<LiveClock timezone="Europe/London" />
<LiveClock timezone="Asia/Tokyo" />

Custom Styling

<LiveClock
  useRoman={true}
  cardinalOnly={true}
  noBorder={true}
  dualTone={false}
/>

Static Time Display

<BaseClock hours={12} minutes={0} seconds={0} />
<BaseClock hours={6} minutes={30} seconds={45} />

Development

Install dependencies

npm install

Run the playground

npm run play

Run tests

npm run test

Build the library

npm run build

Type checking

npm run typecheck

License

MIT © Robert Latamaosadi