My-react-clock NPM

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.