Countdown
Countdown timer component for events, offers, or games. Updates in real-time and dispatches events when complete.
Compact Format
0
Hours
:
0
Minutes
:
0
Seconds
<.countdown id="sale-timer" target_date={~U[2024-12-31 23:59:59Z]} />
Detailed Format
0
Days
:
0
Hours
:
0
Minutes
:
0
Seconds
Until March 13, 2026 at 05:23
<.countdown id="event-timer" target_date={@event_date} format={:detailed} />
With Completion Event
<.countdown
id="timer"
target_date={@target_date}
on_complete="countdown-complete"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique ID for the countdown |
| target_date | DateTime | NaiveDateTime | string | - | Target date/time for countdown |
| format | atom | :compact | Display format (:compact or :detailed) |
| on_complete | string | nil | Event name to dispatch when countdown completes |