my-react-clock

MyReactClock is a powerful ReactJS package that empowers developers to effortlessly integrate stunning and fully customizable clock components into their web applications. Whether you need to display a sleek analog clock, a modern digital clock, or a unique combination of both, MyReactClock has got you covered.

DEMO

Checkout Demo and Docs

Installation

Provide step-by-step installation instructions here.

npm i my-react-clock

Usage

import MyReactClock from 'my-react-clock';

function App() {
  return (
    <div>
      <MyReactClock />
    </div>
  );
}

export default App;

By default will render your current timeZone, for customized timeZone you have to pass required timeZone as props.

Props

import React , { useState } from 'react';
import MyReactClock from 'my-react-clock'

const [currentTime, setCurrentTime] = useState('')
const style = {...}

function App() {
  return (
    <div>
      <MyReactClock getTimeLabel={setCurrentTime} country="Asia/Kolkata" customStyle={style} hrFormat24={true} />
    </div>
  );
}

export default App;

Styling

import React from 'react'
import MyReactClock from 'my-react-clock';

const style = {
  color : {...},
  style : {...}
}

function App() {
  return (
    <div>
      <MyReactClock country="Asia/Kolkata" customStyle={style} />
    </div>
  );
}

export default App;

Supported Props

Prop	Value	Description
style.color.hrHand	orange	To change clock hour hand background color
style.color.miHand	rgba(20,25,30,0.7)	To change clock minute hand background color
style.color.seHand	#ff0000	To change clock second hand background color
style.color.background	orange	To change clock background color
style.style.border	1px solid transparent	You can change clock border thickness and color
style.style.backgroundImage	https://www.sample.com/image.jpg	You can set any type of Image as clock background
style.style.clockShadow	0 0 20px rgba(20,20,20,0.7)	You can set clock shadow like we used to set boxShadow in CSS
style.style.size	30rem / 150px / 75%	You can set clock size in any size property

Keep in mind clock width and height are always equal

Features

• Sleek and Modern Design: MyReactClock provides a collection of visually appealing clock designs that will enhance the aesthetics of your web application.

• Full Customization: Tailor the clocks to match your application's theme by choosing from a range of customization options. Adjust sizes, colors, hand styles, and even enable or disable clock numbers as per your preference.

• Responsive and Mobile-Friendly: MyReactClock ensures that your clocks adapt beautifully to various screen sizes, making them fully responsive and mobile-friendly.

• Smooth Animations: The clocks come with smooth animations for the hour, minute, and second hands, providing an engaging user experience.

• Easy Integration: Integrating MyReactClock into your project is a breeze, and with a few lines of code, your clock will be up and ticking.

• Lightweight and Performant: MyReactClock is built with performance in mind, ensuring that it doesn't weigh down your application.

Contact

For any inquiries or questions, feel free to reach out via email: [e-mail]

🔗 Links

License

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