synthetic
Countdown
A ticking countdown to a target time.
Harbour launchCounts down to 24 Oct, 09:00
3d 04h 12m 00s
12m 33s
01:30
00m 00s
In context
Project cardTime left until the payroll cut-off
Rota export
Payroll cut-off, 28 Oct. Owner: Leo Santos.
4d 01h 59m 59s
Props
| Prop | Type | Required | Default |
|---|---|---|---|
target | string | number | Date | Yes | — |
onComplete | (() => void) | undefined | No | — |
format | ((remainingMs: number) => ReactNode) | undefined | No | — |
Format
The default format drops leading zero units: "2d 04h 12m 33s" becomes "12m 33s" once under an hour remains. Pass your own format function for anything else, such as a single "12:33" clock face.
data-rebar-* attributes
data-rebar-component="countdown" on the root; data-rebar-complete present once the countdown reaches zero.
Migrating to Ant Design
AntD's Statistic.Countdown is the closest equivalent. Not yet codemod-covered, but a near 1:1 prop mapping (value/target, onFinish/onComplete).