View Source LiveToast (Live Toast v0.6.3)

LiveComponent for displaying toast messages.

Summary

Types

Phoenix.Component that renders a part of the toast message.

Set of public options to augment the default toast behavior.

t()

Instance of a toast message. Mainly used internally.

Functions

Helper function around send_toast/3 that is useful in pipelines. Can be used in a pipeline with either Plug.Conn or LiveView.Socket.

Send a new toast message to the LiveToast component.

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

Renders a group of toasts and flashes.

Types

@type component_fn() :: (map() -> Phoenix.LiveView.Rendered.t())

Phoenix.Component that renders a part of the toast message.

@type option() ::
  {:title, binary()}
  | {:icon, component_fn()}
  | {:action, component_fn()}
  | {:component, component_fn()}
  | {:duration, non_neg_integer()}
  | {:container_id, binary()}
  | {:uuid, Ecto.UUID.t()}

Set of public options to augment the default toast behavior.

@opaque t()

Instance of a toast message. Mainly used internally.

Functions

Link to this function

put_toast(conn_or_socket, kind, msg, options \\ [])

View Source
@spec put_toast(Plug.Conn.t(), atom(), binary(), [option()]) :: Plug.Conn.t()
@spec put_toast(Phoenix.LiveView.Socket.t(), atom(), binary(), [option()]) ::
  Phoenix.LiveView.Socket.t()

Helper function around send_toast/3 that is useful in pipelines. Can be used in a pipeline with either Plug.Conn or LiveView.Socket.

Unlike send_toast/3, this function does expose the UUID of the new toast, so if you need to update the toast after popping it onto the list, you should use send_toast/3 directly.

Examples

iex> put_toast(conn, :info, "Thank you for logging in!")
%Plug.Conn{...}

iex> put_toast(socket, :info, "Thank you for logging in!")
%LiveView.Socket{...}
Link to this function

send_toast(kind, msg, options \\ [])

View Source
@spec send_toast(atom(), binary(), [option()]) :: Ecto.UUID.t()

Send a new toast message to the LiveToast component.

Returns the UUID of the new toast message. This UUID can be passed back to another call to send_toast/3 to update the properties of an existing toast.

Examples

iex> send_toast(:info, "Thank you for logging in!", title: "Welcome")
"00c90156-56d1-4bca-a9e2-6353d49c974a"

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

Examples:

defmodule MyModule do
  def toast_class_fn(assigns) do
    [
      # base classes
      "group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
      # start hidden if javascript is enabled
      "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
      # used to hide the disconnected flashes
      if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
      # override styles per severity
      assigns[:kind] == :info && "bg-white text-black",
      assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200"
    ]

  end
end

Then use it in your layout:

<LiveToast.toast_group flash={@flash} connected={assigns[:socket] != nil} toast_class_fn={MyModule.toast_class_fn/1} />

Renders a group of toasts and flashes.

Replace your flash_group with this component in your layout.

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 :bottom_right.
  • toast_class_fn (:any) - function to override the look of the toasts. Defaults to &LiveToast.toast_class_fn/1.