Countdown

Days, hours, minutes and seconds to a moment.

SourcePackage @kerf-js/veneer

Preview

tsx

import { Countdown, Stack, Text } from '@kerf-js/veneer'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 @kerf-js/veneer

Usage

tsx

import { Countdown } from '@kerf-js/veneer'

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