Signature Pad

Event

Subscribe to draw end from LiveView or the client.

On Draw End (Server)

Sign here

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

    <.signature_pad class="signature-pad" on_draw_end="signature_drawn">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

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

On Draw End (Client)

Sign here

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

    <.signature_pad
  class="signature-pad"
  on_draw_end_client="signature-drawn"
>
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

    const el = document.getElementById("signature-events-client");
el?.addEventListener("signature-drawn", (event) => console.log(event.detail));

    const el = document.getElementById("signature-events-client");
el?.addEventListener("signature-drawn", (event: Event) =>
  console.log((event as CustomEvent<unknown>).detail)
);