@ixnode/simple-clock NPM

@ixnode/simple-clock

A simple, customizable, and responsive clock component for React.

🚀 Features

Customizable size and color
Supports both digital and analog clocks
Displays date, time zone and milliseconds
Configurable 12-hour and 24-hour formats
Lightweight and built with TypeScript
Build on top with storybook

📦 Installation

npm install @ixnode/simple-clock

yarn add @ixnode/simple-clock

🔧 Usage

Basic Usage

import React from 'react';
import { Clock } from '@ixnode/simple-clock';
import '@ixnode/simple-clock/dist/styles.css';

const App = () => (
    <Clock size="large" color="blue" showDate={true} showBorder={true} showTimeZone={true} />
);

export default App;

More complex usage

import React from 'react';
import { Clock } from '@ixnode/simple-clock';
import '@ixnode/simple-clock/dist/styles.css';

const App = () => (
    <Clock color={'default'} size={'small'} isAnalog={true} timeZone={"Europe/Berlin"} locale={"de-DE"} />
);

export default App;

🔧 Props

Prop	Type	Default	Description
`color`	`'default'\\|'red'\\|'green'\\|'blue'`	`'default'`	Sets the color of the clock.
`size`	`'small'\\|'medium'\\|'large'`	`'medium'`	Sets the size of the clock.
`showBorder`	`boolean`	`false`	Whether to show a border around the clock.
`use24HourFormat`	`boolean`	`true`	Use 24-hour format (true) or AM/PM (false).
`showTenths`	`boolean`	`false`	Show tenth of a second?
`isAnalog`	`boolean`	`false`	Show an analog clock?
`showDate`	`boolean`	`false`	Show date?
`showTimeZone`	`boolean`	`false`	Should a timezone be displayed?
`timeZoneType`	`'short'\\|'long'`	`'short'`	Which type of timezone should be displayed?
`locale`	`string`	`'en-US'`	Which locale should be displayed?
`timeZone`	`string`	`'UTC'`	Which time zone should be displayed?

Common locales (`locale`)

timeZone is used with the Intl.DateTimeFormat API:

Locale	Description
`en-US`	English (United States)
`en-GB`	English (United Kingdom)
`de-DE`	German (Germany)
`es-ES`	Spanish (Spain)
`fr-FR`	French (France)
`it-IT`	Italian (Italy)
`nl-NL`	Dutch (Netherlands)
`pl-PL`	Polish (Poland)
`pt-BR`	Portuguese (Brazil)
`ru-RU`	Russian (Russia)
`sv-SE`	Swedish (Sweden)
`zh-CN`	Chinese (Simplified, China)
`zh-TW`	Chinese (Traditional, Taiwan)

Common Time Zone Formats and Examples (`timeZone`)

timeZone is used with the Intl.DateTimeFormat API:

1. Common Time Zone Strings (IANA-TZ Format)

These strings are based on the IANA Time Zone Database, which defines time zones used worldwide:

Time Zone	Description
`UTC`	Coordinated Universal Time
`America/New_York`	Eastern Standard Time (EST)
`Europe/Berlin`	Central European Time (CET)
`Asia/Tokyo`	Japan Standard Time (JST)
`Australia/Sydney`	Australian Eastern Time (AET)
`Africa/Cairo`	East Africa Time (EAT)
`Pacific/Auckland`	New Zealand Standard Time (NZST)