📆 react-date-digital-clock

A lightweight and fully customizable React component to display the current date, day name, and digital clock. Built with Tailwind CSS in mind, but also works with inline styles. You can style it freely using utility classes or custom CSS.

✨ Features

- ⏰ Displays live digital clock (updates every second)
- 📅 Automatically updates date at midnight
- 🗓️ Shows day name (e.g., SAT, SUN) in bold, customizable style
- 🎨 Fully customizable via props for Tailwind or custom class names
- 🧩 Supports dynamic width/height via style props
- ⚛️ No external dependencies
---

📦 Installation

``bash
npm install react-date-digital-clock
`
Create a taiwind.config.js if not present and add the given code

`
safelist: [
'p-2', 'text-center', 'border', 'rounded-lg', 'm-1',
'px-2', 'py-2', 'text-xl', 'font-semibold',
'font-bold', 'text-4xl', 'bg-black', 'text-white'
],
`

as shown below:


`js
tailwind.config.js

export default {
safelist: [
'p-2', 'text-center', 'border', 'rounded-lg', 'm-1',
'px-2', 'py-2', 'text-xl', 'font-semibold',
'font-bold', 'text-4xl', 'bg-black', 'text-white'
],
theme: {
extend: {},
},
plugins: [],
}
`


to use the component you can import it as follow

Usage

`
import DateAndClock from "../react-date-digital-clock";


`

Live-Preview

Live Preview

📚 Props Table

| Prop | Type | Default Value | Description |
|----------------|----------|----------------------------------------------------|-------------|
| w | string | '130px' | Minimum width of the container. Applied via inline style minWidth. |
| h | string | '' | Height of the container. Applied via inline style={{ height: h }} |
isDayNameRequired|boolean|true|Toggles the display of the day name (SAT, SUN, etc.).
| generalProps | string | 'p-2 flex justify-center items-center text-center border rounded-lg m-1 w-auto' | Tailwind (or custom) classes for the outer