Corex.Toast (Corex v0.1.0-alpha.13)

View Source

Phoenix implementation of Zag.js Toast.

Examples

 <.toast_group flash={@flash}/>

API Control

Client-side

<button phx-click={Corex.Toast.push_toast("This is an info toast", "This is an info toast description", :info)} class="button">
 Create Info Toast
</button>

<div phx-disconnected={Corex.Toast.create_toast("We can't find the internet", "Attempting to reconnect", :loading, duration: :infinity)}></div>

Server-side

def handle_event("create_info_toast", _, socket) do
  {:noreply, Corex.Toast.push_toast(socket, "This is an info toast", "This is an info toast description", :info)}
end

Flash Messages

You can use the flash attribute to display flash messages as toasts.

<.toast_group
flash={@flash}
flash_info={%Corex.Flash.Info{title: "Success", type: :success, duration: 5000}}
flash_error={%Corex.Flash.Error{title: "Error", type: :error, duration: :infinity}}/>

Summary

Components

toast_client_error(assigns)

Renders a div that creates a toast notification when a client error occurs.

toast_connected(assigns)

Renders a div that creates a toast notification when the connection is restored.

toast_disconnected(assigns)

Renders a div that creates a toast notification when the connection is lost.

toast_group(assigns)

Renders a toast group (toaster) that manages multiple toast notifications.

toast_server_error(assigns)

Renders a div that creates a toast notification when a server error occurs.

API

create_toast(title, description \\ nil, type \\ :info, opts \\ [])

Creates a toast notification programmatically (client-side).

push_toast(socket, title, description \\ nil, type \\ :info, duration \\ 5000)

Server-side function to push a toast event to the client.

Components

toast_client_error(assigns)

Renders a div that creates a toast notification when a client error occurs.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects a client-side connection error.

Examples

<.toast_client_error
  title="We can't find the internet"
  description="Attempting to reconnect"
  type={:loading}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "client-error-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :info. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to :infinity.

toast_connected(assigns)

Renders a div that creates a toast notification when the connection is restored.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects that the connection has been restored.

Examples

<.toast_connected
  title="Connection restored"
  description="You're back online"
  type={:success}
/>

Attributes

  • id (:string) - Defaults to "connected-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :success. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to 5000.

toast_disconnected(assigns)

Renders a div that creates a toast notification when the connection is lost.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects that the connection has been lost.

Examples

<.toast_disconnected
  title="Connection lost"
  description="Attempting to reconnect"
  type={:warning}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "disconnected-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :info. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to :infinity.

toast_group(assigns)

Renders a toast group (toaster) that manages multiple toast notifications.

This component should be rendered once in your layout.

Examples

 <.toast_group />
 <div phx-disconnected={Corex.Toast.create_toast("We can't find the internet", "Attempting to reconnect", :loading, duration: :infinity)}></div>

API Control

Client-side

<button phx-click={Corex.Toast.create_toast("This is an info toast", "This is an info toast description", :info)} class="button">
 Create Info Toast
</button>

Server-side

def handle_event("create_info_toast", _, socket) do
  {:noreply, Corex.Toast.push_toast(socket, "This is an info toast", "This is an info toast description", :info)}
end

Attributes

  • id (:string) - Defaults to nil.
  • placement (:string) - Defaults to "bottom-end". Must be one of "top-start", "top", "top-end", "bottom-start", "bottom", or "bottom-end".
  • overlap (:boolean) - Defaults to true.
  • max (:integer) - Defaults to 5.
  • gap (:integer) - Defaults to nil.
  • offset (:string) - Defaults to nil.
  • pause_on_page_idle (:boolean) - Defaults to false.
  • flash (:map) - the map of flash messages to display as toasts. Defaults to %{}.
  • flash_info (Corex.Flash.Info) - configuration for info flash messages (Corex.Flash.Info struct).
  • flash_error (Corex.Flash.Error) - configuration for error flash messages (Corex.Flash.Error struct).

Slots

  • loading (required) - the loading spinner icon to display when duration is infinity.

toast_server_error(assigns)

Renders a div that creates a toast notification when a server error occurs.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects a server-side connection error.

Examples

<.toast_server_error
  title="Something went wrong!"
  description="Attempting to reconnect"
  type={:error}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "server-error-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :error. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to :infinity.

API

create_toast(title, description \\ nil, type \\ :info, opts \\ [])

Creates a toast notification programmatically (client-side).

This function returns a JS command that can be used in event handlers.

Examples

def handle_event("save", _params, socket) do
  # ... save logic ...
  {:noreply, push_event(socket, "toast-create", %{
    title: "Saved!",
    description: "Your changes have been saved.",
    type: "success"
  })}
end

Or use the JS command version:

<button phx-click={Corex.Toast.create("Saved!", "Your changes have been saved.", :success)}>
  Save
</button>

<button phx-click={Corex.Toast.create("Loading...", nil, :loading, duration: :infinity)}>
  Show Loading
</button>

push_toast(socket, title, description \\ nil, type \\ :info, duration \\ 5000)

Server-side function to push a toast event to the client.

Use this in your LiveView event handlers.

Examples

def handle_event("save", _params, socket) do
  # ... save logic ...
  {:noreply, push_toast(socket, "Saved!", "Your changes have been saved.", :success)}
end