View Source LiveToast (Live Toast v0.6.4)

LiveComponent for displaying toast messages.

Summary

Types

component_fn()

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

option()

Set of public options to augment the default toast behavior.

t()

Instance of a toast message. Mainly used internally.

Functions

group_class_fn(assigns)

Default class function for the container around the toasts. Override this to change the classes of the toast container element.

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

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_toast(kind, msg, options \\ [])

Send a new toast message to the LiveToast component.

toast_class_fn(assigns)

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

toast_group(assigns)

Renders a group of toasts and flashes.

Types

component_fn()

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

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

option()

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

Set of public options to augment the default toast behavior.

t()

@opaque t()

Instance of a toast message. Mainly used internally.

Functions

group_class_fn(assigns)

Default class function for the container around the toasts. Override this to change the classes of the toast container element.

Examples:

defmodule MyModule do
  def group_class_fn(assigns) do
    [
      # base classes
      "fixed z-50 max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none grid origin-center",
      # classes to set container positioning
      assigns[:corner] == :bottom_left && "items-end bottom-0 left-0 flex-col-reverse sm:top-auto",
      assigns[:corner] == :bottom_right && "items-end bottom-0 right-0 flex-col-reverse sm:top-auto",
      assigns[:corner] == :top_left && "items-start top-0 left-0 flex-col sm:bottom-auto",
      assigns[:corner] == :top_right && "items-start top-0 right-0 flex-col sm:bottom-auto"
    ]

  end
end

Then use it in your layout:

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

Since this is a public function, you can also write a new function that calls it and extends it's return values.

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

@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 not 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{...}

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

@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"

toast_class_fn(assigns)

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} />

Since this is a public function, you can also write a new function that calls it and extends it's return values.

toast_group(assigns)

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.
kinds (:list) - the valid severity level kinds. Defaults to [:info, :error].
corner (:atom) - the corner to display the toasts. Defaults to :bottom_right.
group_class_fn (:any) - function to override the container classes. Defaults to &LiveToast.group_class_fn/1.
toast_class_fn (:any) - function to override the toast classes. Defaults to &LiveToast.toast_class_fn/1.