A fully customizable React component that displays both current date and a digital clock, built with Tailwind CSS utility classes. Easily adaptable to your design system by adding or removing Tailwind classes via props.
npm install react-date-digital-clockSAT, SUN) in bold, customizable style
style props
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 container |
| dateProps | string | 'px-2' | Tailwind or custom classes applied to the date element |
| clockProps | string | 'px-2' | Tailwind or custom classes applied to the clock element |
dayNameProps |string |'flex items-center justify-center bg-black text-white rounded-md p-2 font-bold text-4xl'| Tailwind or custom classes applied to the day name element. Only used if isDayNameRequired = true.
---
note: The default classes of the above table are of tailwind css
🧱 Component Structure
`jsx
{date}
{time}
{dayName}
``