Skip to main content

​
Countdown

Countdown timer displaying human-readable time remaining or elapsed. Auto-warns with red background when less than 2 hours remain.

​
Import

import { Countdown } from '@adoptaunabuelo/react-components';

​
Props

​
toDate
Date
required
Target date to count down to (or count up from if past)
​
color
string
Background color (overridden by warning red when less than 2 hours remain)
​
textColor
string
Text and icon color (overridden by white when warning)
​
style
React.CSSProperties
Custom styles for the container

​
Usage

<Countdown
  toDate={new Date("2024-12-31")}
  color={ColorV2.surface.primary}
  textColor={ColorV2.text.white}
/>
// Shows: "3 días restantes" or "2 horas de retraso"

​
Notes

  • Uses moment.js with Spanish locale for human-readable formatting
  • Shows “restantes” (remaining) when target is in future
  • Shows “de retraso” (overdue) when target is in past
  • Automatically switches to warning red background when less than 2 hours remain
  • Warning state also changes text/icon to white
  • Includes clock icon from lucide-react

Build docs developers (and LLMs) love

Get started for freeTalk to us