Analog Clock iOS Style

A beautiful, customizable analog clock React component that mimics the iOS clock design. This component provides a sleek and modern look while maintaining high performance and flexibility.

Features

🎨 iOS-style design with smooth animations
⚡️ Built with React and TypeScript
🎯 Fully customizable colors and sizes
📱 Responsive and mobile-friendly
🧪 Tested with Jest
🎭 Styled with Tailwind CSS
📦 Zero dependencies (except React)

Installation

npm install analog-clock-ios-style
# or
yarn add analog-clock-ios-style

Usage

import { AnalogClock } from 'analog-clock-ios-style';
import 'analog-clock-ios-style/dist/index.css';

function App() {
  return (
    <div className="clock-container">
      <AnalogClock
        size={200}
        primaryColor="#000000"
        secondaryColor="#666666"
        backgroundColor="#ffffff"
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
size	number	200	Size of the clock in pixels
primaryColor	string	'#000000'	Color of the hour and minute hands
secondaryColor	string	'#666666'	Color of the second hand
backgroundColor	string	'#ffffff'	Background color of the clock

Development

Clone the repository:

git clone https://github.com/yourusername/analog-clock-ios-style.git
cd analog-clock-ios-style

Install dependencies:

npm install

Start development:

npm run build

Scripts

npm run build - Build the component
npm run test - Run tests

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Hamed Montazeri

Made with ❤️ and React

Package detail

analog-clock-ios-style

readme