Components

CountdownTimer

Time left until a moment, as a clock with an optional draining ring, a warning colour and spoken milestones.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { CountdownTimer } from '@bigbang/ui';
Source: CountdownTimer.tsx
Storybook: CountdownTimer · Playground

CountdownTimer is in the @bigbang/ui package.

import { CountdownTimer } from '@bigbang/ui';

<CountdownTimer key={expiresAt} target={expiresAt} label="Code expiry" warnAt={30} onComplete={enableResend} />;

formatClock(seconds) is exported for the clock format.

Props

targetRequired

Description: When the time runs out: a Date, an ISO 8601 date-time or epoch milliseconds. Comes from the server, so a reload does not restart it.
Type: string | number | Date

label

Description: Names the timer for screen readers, such as "Kodun geçerlilik süresi".
Type: string

variant

Description: text is the clock alone; ring adds a ring that empties.
Type: 'ring' | 'text'
Default: 'text'

duration

Description: Total seconds the ring stands for. Without it, the time left when the timer mounts.
Type: number

warnAt

Description: Seconds left at which the timer turns to the warning colour.
Type: number

announceAt

Description: Seconds left at which screen readers hear the time left; 0 says the time is up.
Type: readonly number[]
Default: [300, 60, 10, 0]

onComplete

Description: Called once when the time runs out.
Type: () => void

size

Description: Text size.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

className

Description: Added to the root element; use it for layout only.
Type: string

Data attributes

data-component="countdown-timer", data-warning, data-done.
data-part: ring, ring-value, clock, announcement.