React Analog Clock Component

React Analog Clock is a customizable React component that displays an analog clock with various options for customization.

Check out the online demo For Examples.

Installation

You can install the @hoseinh/react-analog-clock package via npm:

npm install @hoseinh/react-analog-clock

Usage

All props for the AnalogClock component are completely optional, empowering users to tailor the clock's appearance and behavior to their specific preferences. The package offers a selection of five distinct clock faces through the "numbersType" prop (refer to the props table), while also providing the flexibility to define a completely custom clock face using the "customBg" prop.

import React from 'react';
import { AnalogClock } from '@hoseinh/react-analog-clock';

const MyClock = () => {
  return (
    <AnalogClock
      showMinuteHand={true}
      showSecondHand={true}
      showBorder={true}
      showHandBase={true}
      smooth={false}
      whiteNumbers={false}
      square={false}
      numbersType="numbersAndLines"
      borderColor="#000000"
      handBaseColor="#000000"
      handColor={{ hour: "#000000", minute: "#000000", second: "#e74c3c" }}
      handLength={{ hour: "65px", minute: "90px", second: "90px" }}
      handThickness={{ hour: "2px", minute: "2px", second: "2px" }}
      size="200px"
      backgroundColor="#ffffff"
    />
  );
};

export default MyClock;

You can show a static time and disable the clock's auto update by passing a "staticDate" Date object:

.
.
.
    <AnalogClock
      staticDate={new Date(2024, 0, 1, 12, 15, 0)}
    />
.
.
.

Props

Prop	Description	Options	Default Value
showMinuteHand	Whether to show the minute hand	true, false	true
showSecondHand	Whether to show the second hand	true, false	true
showBorder	Whether to show the clock border	true, false	true
showHandBase	Whether to show the hand base	true, false	true
smooth	Whether to smoothly transition the hand movement	true, false	false
whiteNumbers	Whether to display white numbers on the clock face	true, false	false
square	Whether the clock should be square	true, false	false
numbersType	Type of numbers to display on the clock face	"numbers", "dots", "numbersAndLines", "lines", "roman"	"numbersAndLines"
borderColor	Color of the clock border	Any valid CSS color value	#000000
backgroundColor	Background color of the clock	Any valid CSS color value	#ffffff
handColor	Object containing colors for each hand (hour, minute, second)	-	{ hour: "#000000", minute: "#000000", second: "#e74c3c" }
handLength	Object containing lengths for each hand (hour, minute, second)	-	{ hour: "65px", minute: "90px", second: "90px" }
handThickness	Object containing thickness for each hand (hour, minute, second)	-	{ hour: "2px", minute: "2px", second: "2px" }
handBaseColor	Color of the hand base	Any valid CSS color value	#000000
size	Size of the clock	Any valid CSS size value	200px
staticDate	Static date to display on the clock which will disable clock's auto-update	Date object	-
customBg	Custom background image for the clock which will replace the default backgrounds	URL to image file	-

License

This project is licensed under the MIT License.