View Source LiveToast (Live Toast v0.4.0)

LiveComponent for displaying toast messages.

Summary

Functions

Implement your own function to override the class of the toasts.

toast_group/1 is just a small Phoenix.Component wrapper around the LiveComponent for toasts. You can use the LiveComponent directly if you prefer, this is just a convenience.

Functions

Link to this function

send_toast(kind, msg, title \\ nil, icon \\ nil, action \\ nil, component \\ nil, id \\ "toast-group")

View Source

Merges a new toast message into the current toast list.

Implement your own function to override the class of the toasts.

Example:

defmodule MyModule do
  def toast_class_fn(assigns) do
    [
      "w-80 sm:w-96 z-50 p-2 rounded-md shadow origin-center overflow-hidden",
      assigns[:rest][:hidden] != true && "flex",
      assigns[:kind] == :info && "text-gray-800 bg-gray-50 dark:bg-gray-800 dark:text-gray-300",
      assigns[:kind] == :success &&
        "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400",
      assigns[:kind] == :error && "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400"
    ]
  end
end

# use it in your layout:
# <LiveToast.toast_group flash={@flash} connected={assigns[:socket] != nil} toast_class_fn={MyModule.toast_class_fn/1} />

toast_group/1 is just a small Phoenix.Component wrapper around the LiveComponent for toasts. You can use the LiveComponent directly if you prefer, this is just a convenience.

Attributes

  • flash (:map) (required) - the map of flash messages.
  • id (:string) - the optional id of flash container. Defaults to "toast-group".
  • connected (:boolean) - whether we're in a liveview or not. Defaults to false.
  • corner (:atom) - the corner to display the toasts. Defaults to :top_right.
  • toast_class_fn (:any) - function to override the look of the toasts. Defaults to &LiveToast.toast_class_fn/1.