Countdown

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import Countdown from @prepared911/ui/countdown.

Countdown

Prop	Type	Default	Notes
`seconds`	`number`	required	Starting duration; changing it starts a new session.
`active`	`boolean`	`true`	Arms the timer. A false-to-true transition rearms it.
`message`	`(seconds: DisplayValue, count: number) => LocalizedMessage`	required	Complete localized sentence containing the formatted seconds exactly once.
`announcement`	`(seconds: number) => LocalizedMessage`	required	Called only at 30, 10, and 5 seconds.
`cancelLabel`	`LocalizedMessage`	required	Visible label for the control that stops the action.
`cancelledMessage`	`LocalizedMessage`	required	Replaces the timer after cancellation.
`completedMessage`	`LocalizedMessage`	required	Replaces the timer after completion.
`onCancel`	`() => void`	required	Called after the internal timer stops.
`onComplete`	`() => void`	required	Called once when an armed timer reaches zero.
`deadline`	`number`	generated from `seconds`	Absolute Unix timestamp in milliseconds for synchronized countdowns.
`locale`	`string`	runtime locale	BCP 47 locale for the number.
`id`	`string`		Root element id.
`ref`	`Ref<HTMLDivElement>`		Root element ref.

Props

Name	Type	Default	Description
`announcement`	`CountdownAnnouncement`	—	Polite announcement produced at 30, 10, and 5 seconds remaining.
`cancelLabel`	`LocalizedMessage`	—	Visible label for the control that stops the automatic action.
`cancelledMessage`	`LocalizedMessage`	—	Visible line shown after the person stops the automatic action.
`completedMessage`	`LocalizedMessage`	—	Visible line shown after the automatic action reaches its deadline.
`message`	`CountdownMessage`	—	Complete localized sentence containing the formatted remaining-seconds placeholder exactly once.
`onCancel`	`() => void`	—	Called after the person stops the automatic action.
`onComplete`	`() => void`	—	Called once when an armed countdown reaches zero.
`seconds`	`number`	—	Whole seconds in a newly armed countdown and the maximum readout when `deadline` is supplied. Non-finite values become `0`; finite values are rounded down and kept at `0` or above. Changing the resolved value restarts the countdown.
`active`	`boolean`	`true`	Whether the countdown is armed. Each transition from `false` to `true` starts from `seconds`, or catches up to `deadline` when one is supplied; `false` holds the starting value and makes the keep control unavailable.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`deadline`	`number`	—	Absolute Unix timestamp in milliseconds for a shared deadline. When omitted, Countdown creates a deadline from `seconds`. Changing the deadline starts a new session.
`id`	`string`	—	Id of the root element.
`locale`	`string`	—	BCP 47 locale for the remaining number. Defaults to the runtime locale, so a server-rendered app that must match the client passes it explicitly.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Countdown / Usage

Countdown / Accessibility

On this page

Countdown

Props

Storybook

Countdown

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import Countdown from @prepared911/ui/countdown.

Countdown

Prop	Type	Default	Notes
`seconds`	`number`	required	Starting duration; changing it starts a new session.
`active`	`boolean`	`true`	Arms the timer. A false-to-true transition rearms it.
`message`	`(seconds: DisplayValue, count: number) => LocalizedMessage`	required	Complete localized sentence containing the formatted seconds exactly once.
`announcement`	`(seconds: number) => LocalizedMessage`	required	Called only at 30, 10, and 5 seconds.
`cancelLabel`	`LocalizedMessage`	required	Visible label for the control that stops the action.
`cancelledMessage`	`LocalizedMessage`	required	Replaces the timer after cancellation.
`completedMessage`	`LocalizedMessage`	required	Replaces the timer after completion.
`onCancel`	`() => void`	required	Called after the internal timer stops.
`onComplete`	`() => void`	required	Called once when an armed timer reaches zero.
`deadline`	`number`	generated from `seconds`	Absolute Unix timestamp in milliseconds for synchronized countdowns.
`locale`	`string`	runtime locale	BCP 47 locale for the number.
`id`	`string`		Root element id.
`ref`	`Ref<HTMLDivElement>`		Root element ref.

Props

Name	Type	Default	Description
`announcement`	`CountdownAnnouncement`	—	Polite announcement produced at 30, 10, and 5 seconds remaining.
`cancelLabel`	`LocalizedMessage`	—	Visible label for the control that stops the automatic action.
`cancelledMessage`	`LocalizedMessage`	—	Visible line shown after the person stops the automatic action.
`completedMessage`	`LocalizedMessage`	—	Visible line shown after the automatic action reaches its deadline.
`message`	`CountdownMessage`	—	Complete localized sentence containing the formatted remaining-seconds placeholder exactly once.
`onCancel`	`() => void`	—	Called after the person stops the automatic action.
`onComplete`	`() => void`	—	Called once when an armed countdown reaches zero.
`seconds`	`number`	—	Whole seconds in a newly armed countdown and the maximum readout when `deadline` is supplied. Non-finite values become `0`; finite values are rounded down and kept at `0` or above. Changing the resolved value restarts the countdown.
`active`	`boolean`	`true`	Whether the countdown is armed. Each transition from `false` to `true` starts from `seconds`, or catches up to `deadline` when one is supplied; `false` holds the starting value and makes the keep control unavailable.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`deadline`	`number`	—	Absolute Unix timestamp in milliseconds for a shared deadline. When omitted, Countdown creates a deadline from `seconds`. Changing the deadline starts a new session.
`id`	`string`	—	Id of the root element.
`locale`	`string`	—	BCP 47 locale for the remaining number. Defaults to the runtime locale, so a server-rendered app that must match the client passes it explicitly.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Countdown / Usage

Countdown / Accessibility

On this page

Countdown

Props

Storybook