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: [email protected]

🔗 Links

License

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