Countdown
Countdown timer with semantic labels, progress bars, and custom rendering.
Installation
Usage
01d:00h:00m:00s
Countdown renders a formatted time string out of the box when you pass a target Date.
Examples
Custom Render
Use the render prop when you want to control typography, color, or surrounding UI.
01d:00h:00m:00s
Semantic Labels
Show different text based on expired state.
Open - 00d:01h:00m:00s left
Show When Expired
Display time since expiration with showWhenExpired.
Closed - 00d:01h:00m:00s ago
Live To Closed
Show how the render prop can switch labels and styling when the countdown crosses zero.
Watch the countdown expire after about 10 seconds.
Live - 00d:00h:00m:10s leftWith Progress
Combine remainingMs with your own UI to build progress bars and timed flows.
Time remaining00d:00h:01m:00s
API Reference
Countdown
| Prop | Type | Default | Description |
|---|---|---|---|
to | Date | required | Target date for the countdown |
showWhenExpired | boolean | false | Continue showing time after expiration |
stopOnExpired | boolean | false | Stop updating once the countdown reaches zero |
className | string | undefined | Class name for the default text output |
children | (state: UseCountdownResult) => ReactNode | undefined | Optional custom render function |
UseCountdownResult
The state object passed to the render function.
| Property | Type | Description |
|---|---|---|
timeString | string | null | Formatted time string for the current countdown state |
remainingMs | number | null | Milliseconds remaining until the target date |
isExpired | boolean | Whether the countdown has expired |