🕰️ React Analog Clock

A lightweight, customizable analog clock component for React — supports dynamic resizing, color themes, timezone offset, and optional hour numbers.

📦 NPM
🌐 Live Preview

---

🚀 Installation

npm install @sinaasghari/react-analog-clock

or with Yarn:

yarn add @sinaasghari/react-analog-clock

---

📦 Usage

import AnalogClock from "@sinaasghari/react-analog-clock";

export default function App() {
  return (
    <AnalogClock
      size={300}
      showNumbers={true}
      centerDotColor="#000"
      hourColor="#333"
      minutesColor="#555"
      secondColor="red"
      timezoneOffset={60} // Timezone offset in minutes (e.g. GMT+1 = 60)
    />
  );
}

---

⚙️ Props

Prop	Type	Default	Description
size	number	300	Overall size of the clock (scales everything proportionally)
showNumbers	boolean	true	Whether to show the hour numbers (1–12)
centerDotColor	string (CSS color)	"#ccc"	Color of the central pivot dot
hourColor	string (CSS color)	"#333"	Color of the hour hand
minutesColor	string (CSS color)	"#666"	Color of the minute hand
secondColor	string (CSS color)	"red"	Color of the second hand
style	React.CSSProperties	{}	Custom inline styles applied to the clock container
timezoneOffset	number (minutes)	0	Timezone offset in minutes (e.g. Iran = +210, New York = -240)

---

🖌️ Styling

The component uses a style.css file internally. You can override styles using the style prop or by overriding class names:

• .clock
• .dot
• .hour, .twelve, .one, ..., .eleven
• .hour-hand
• .minute-hand
• .second-hand

---

🕓 Timezone Support

The timezoneOffset prop allows you to set the clock to a specific timezone.

Example:
For Iran (UTC+3:30), pass timezoneOffset={210}.

---

📌 Notes

• The clock updates every second using setInterval.
• Fully responsive: the size scales proportionally using CSS transform: scale(...).

---

📃 License

MIT © Sina Asghari

---

📬 Contact

Feel free to reach out:

• 📸 Instagram: @drsinaasghari
• ✈️ Telegram: @drsinaasghari