my-awesome-react-digital-clock

A customizable React component for displaying a digital clock with day and AM/PM indicator, supporting both light and
dark modes.

Live Demo

https://adimalka14.github.io/digital-clock-component/

Installation

``bash
npm install my-awesome-react-digital-clock
`

Make sure you have React (v19+) installed, as defined in the peer dependencies.

Usage

$3

` jsx Copy
import React from 'react';
import { DigitalClock } from 'my-awesome-react-digital-clock';

function MyDigitalClock() {

return (
<>
{/ Default /}

bgColor={'#424242'}
fgColor={'#fff'}
hoverColor={'rgba(66,66,66,0.66)'}
size={300}
format={'12h'}
timezone={'Europe/Berlin'}
/>
bgColor={'#f4f4f4'}
fgColor={'#248cff'}
hoverColor={'rgba(186,231,255,0.55)'}
size={500}
format={'24h'}
timezone={'UTC'}
/>
bgColor={'#f4f4f4'}
fgColor={'rgba(255,36,36,0.91)'}
hoverColor={'rgba(255,36,36,0.34)'}
size={650}
format={'24h'}
timezone={'Europe/London'}
/>
<>
);
}
export default MyDigitalClock;
`

Props

$3

| Prop | Type | Default | Description |
|----------------|-------------------|-----------------------|-------------------|
| size | Number | 250 | size in px |
| bgColor | String | #424242 | Background color | | | light | Digital clock. |
| fgColor | String | #fff | Foreground color | | light | Digital clock. |
| hoverColor | String | rgba(66,66,66,0.66) | Hover color | | light | Digital clock. |
| format | '24h' or '12h' | '24h' | Display time format |
| timeZone | String | current timezone | Timezone | | light` | Digital clock. |

Note: When color="dark", the clock will use a darker background/foreground (defined internally) to make it look better
in dark mode.

Plan & Design

!Design

Final Outcome

!Final Outcome

Contributing

1. Fork this repository
2. Create a new branch for your feature or bugfix: git checkout -b feature/some-improvement
3. Make your changes, write tests, commit, and push
4. Create a Pull Request with a clear explanation of what you’ve done
5. All contributions and suggestions are welcome!

License

This project is licensed under the MIT License.