Timer · Events

Subscribe to tick and complete from LiveView or the client.

On tick and on complete (Server)

Time	Event	Id	Value
No event yet. Interact with the components to receive new events

    <.timer
  countdown
  start_ms={3_600_000}
  target_ms={0}
  class="timer"
  on_tick="timer_tick"
  on_complete="timer_complete"
>
  <:start_trigger><.heroicon name="hero-play"/></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause"/></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play"/></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path"/></:reset_trigger>
</.timer>

    def handle_event("timer_tick", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "timer_tick")
  {:noreply, socket}
end

def handle_event("timer_complete", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "timer_complete")
  {:noreply, socket}
end

On tick and on complete (Client)

Time	Event	Id	Value
No event yet. Interact with the components to receive new events

    <.timer
  id="timer-events-client"
  countdown
  start_ms={3_600_000}
  target_ms={0}
  class="timer"
  on_tick_client="timer-tick"
  on_complete_client="timer-complete"
>
  <:start_trigger><.heroicon name="hero-play"/></:start_trigger>
  <:pause_trigger><.heroicon name="hero-pause"/></:pause_trigger>
  <:resume_trigger><.heroicon name="hero-play"/></:resume_trigger>
  <:reset_trigger><.heroicon name="hero-arrow-path"/></:reset_trigger>
</.timer>

    const el = document.getElementById("timer-events-client")
if (!el) return
el.addEventListener("timer-tick", (event) => {
  const d = event.detail
  console.log(d?.formattedTime, d?.id)
})
el.addEventListener("timer-complete", (event) => {
  console.log(event.detail?.id)
})

    const el: HTMLElement | null = document.getElementById("timer-events-client")
if (!el) return
el.addEventListener("timer-tick", (event: CustomEvent<{ formattedTime?: string; id?: string }>) => {
  const d = event.detail
  console.log(d?.formattedTime, d?.id)
})
el.addEventListener("timer-complete", (event: CustomEvent<{ id?: string }>) => {
  console.log(event.detail?.id)
})