Countdown
Time left until a target, with rolling digits.
import { Countdown } from "pleate/countdown";Formats and sizes
Lisbon, 12 June
Holds
- Seats 14A and 14BTP 1351 to Lisbon
- Online check-inOpens 48 hours before departure
On complete
A 10 second hold that calls onComplete.
Fare locked for
Book before the hold ends to keep €148.
Props
- to
Target moment, as a Date or epoch milliseconds.
Date | number- format
How the remaining time is split.
"mm:ss" | "hh:mm:ss" | "d h m"default "mm:ss"- onComplete
Called once when the time runs out.
() => void- size
Digit size.
"sm" | "md" | "lg"default "md"- label
Visible text before the digits.
ReactNode- announce
Announce the minute-level text politely as it changes.
booleandefault false
Accessibility
- The rolling digits are hidden from screen readers. A text such as "14 minutes left" changes at most once a minute.
- That text is only announced when announce is set.
- Shows a placeholder until mounted, so server and client markup match.
- Ticking pauses while the tab is hidden and resyncs when it comes back.