Data display

Countdown and FormattedNumber

Time left until a moment, and numbers formatted for the reader: currency, percent, compact.

Ant Design: Statistic.Countdown

import { Countdown, FormattedNumber } from '@alea/ui';

Examples

The countdown updates every second; screen readers hear it once a minute.

Launch in

Revenue

$126,560

1.8M visits · 4.3% conversion

Time left until a moment, updating every second (Ant Statistic.Countdown). Screen readers hear it once a minute, not every second.

Prop	Type	Default	Description
`label`required	`ReactNode`	-	What it counts down to, read before the time ("Sale ends in").
`to`required	`number \| Date`	-	When it ends: a Date or a timestamp in ms.
`className`	`string`	-
`onEnd`	`(() => void)`	-	Called once when it reaches zero.
`showDays`	`boolean`	-	Show days. Default true when there is more than a day left.

A number formatted for the reader's locale: currency, percent, compact (Chakra FormatNumber, Mantine NumberFormatter).

Prop	Type	Default	Description
`value`required	`number`	-
`format`	`NumberFormatOptions`	-	Intl.NumberFormat options: { style: 'currency', currency: 'USD' }, { notation: 'compact' }, { style: 'percent' }.
`locale`	`string`	-	A BCP 47 locale. Default the browser's.

The countdown ticks visually every second, but screen readers hear it once a minute (a polite live region), not sixty times.

Say what it counts down to in label.
Use FormattedNumber instead of formatting by hand: it follows the reader's locale.

Don't