Countdown
Days, hours, minutes and seconds to a moment.
SourcePackage @weft-js/warp
Preview
tsx
import { Countdown, Stack, Text } from '@weft-js/warp'export function Freeze() { const to = Date.now() + 2 * 3600_000 + 14 * 60_000 return ( <Stack gap="related" align="center"> <Text role="label">Deploy freeze starts in</Text> <Countdown to={to} label="Deploy freeze starts in" /> </Stack> )}Installation
npm install @weft-js/warpUsage
tsx
import { Countdown } from '@weft-js/warp'Accessibility
- It is a timer with live updates off, and it is announced once, at one minute.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
to | number | — | The moment, in epoch ms. |
now | number | — | The time now, to render on the server. Without it the digits fill in after mount. |
label | string | 'Starts in' | Its accessible name. |
| Event | Type | Default | Description |
|---|---|---|---|
onDone | (() => void) | — | It reached zero. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="countdown"] [data-part="countdown"]
countdown
RelatedScheduled lobby