CountdownTimer

final class Phui\Components\CountdownTimer

A prefix, a falling time and a postfix. Starts from seconds when it mounts and decrements once a second, clearing its interval when it unmounts. Takes no focus and emits nothing, so drive the end of the countdown from your own timer and unmount the component when it is done.

use Phui\Components\CountdownTimer;
use Phui\Nodes\Node;

Node::when(
    $this->expiring,
    CountdownTimer::mount()->props(seconds: 90, prefix: 'Expires in'),
);

Props

Prop	Type	Default	Description
seconds	int	60	Where the countdown starts, read once on mount.
prefix	string|StyledString	'Remaining:'	Text before the time.
postfix	string|StyledString	'...'	Text appended to the time.

The time is formatted 1h 2m 3s, dropping the hours below an hour and the minutes below a minute.

Colours

Phui\Components\Colours\CountdownTimerColours

Colour	Palette default	Used for
time	accent	The remaining time. The prefix is left unstyled.