Skip to content

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

Notifications You must be signed in to change notification settings

Keshara1997/Analog-Clock

Repository files navigation

Analog-Clock

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

Installation

npm i seka-analogclock

Usage

All props for the AnalogClock component are optional, allowing users to customize the clock's look and behavior. The package offers five different watch faces through the "numbertype" prop, and users can also define a custom watch 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;

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published