Live Toast - new toast/flash component for Phoenix LiveView

Your Libraries & OS Mentoring Libraries
,
1

Demo: https://toast.src.rip
GitHub: GitHub - srcrip/live_toast: A beautiful drop-in replacement for the Phoenix Flash system.
Hex Docs: Live Toast — Live Toast v0.6.2

Announcing Live Toast: a replacement toast/flash component for Phoenix LiveView, heavily inspired by the look of Sonner (the amazing toast component for React).

I’ve been cooking this up for a while. It’s still pre-1.0, but the general API should be solid.

My biggest gripe with the default flash system in Phoenix is that you may only have one toast for a given severity level. No more! Now you can use Live Toast to get around this, but it will also continue to render your flash messages in the same style so you can incrementally move towards the toasts instead.

As I said, its still early days so let me know if you find any problems.

34 Likes
2

This is great! It looked promising when you first mentioned it and I’m into the further work you’ve done.

I’m in the processes of converting a project over to it. A couple of problems off the bat which are only related to docs: you aren’t properly indenting the @doc examples so they aren’t rendering as code in Hexdocs. The code link (</>) is also broken in a bunch (possibly all) places. Not sure why that one is.

Lastly: I would love a :bottom_center option (and of course probably include :top_center) as that’s what I’m currently using. Happy to send a PR.

Oh, also while it’s fairly obvious, the docs mention using the put_toast helper without any instructions on how to import it.

EDIT: I’m just going to create github issues.

3 Likes
3

Thank you, GitHub issues are much appreciated!

In terms of importing, you really only need the top level LiveToast module so you can use it without aliasing or imports!

4

Oh I figured that out, just nice to include in the docs as it’s not 100% clear and causes a bit of mental dissonance :slight_smile: Or even like just put LiveToast.put_toast so it’s super obvious it’s not in a submodule or something. I just appreciate idiot-proof docs :grin:

PS: Client project has been converted to LiveToast and it’s working like a charm :rocket:

3 Likes
5

Nicely done :pray:. I’ve done a few Toast versions in Phoenix myself but your version is way nicer

1 Like
6

Very well done, @sevensidedmarble!
The demo page is a big plus, we need more of those in the LiveView ecosystem.

I will defo use this going forward as the default solution for Flash/Toast messages in Phoenix.

1 Like
7

Great lib! I’m trying to add icon to custom_toast_class_fn. Can you show some example?Tnanks!

1 Like
8

have you found a way to put an icon in a centrilized way?

I had to add an option to every put_toast I got in the code and it led me to encapsulate the put_toast or send_toast.

but if you want to know, that works:

#example

def my_icon(assigns) do
    ~H"""
    <.icon name="hero-exclamation-circle" class="mr-1" />
    """
  end

  @impl true
  def mount(%{"id" => id}, _session, socket) do
    LiveToast.put_toast(socket, :info, "Message",
      title: "Info",
      icon: &my_icon/1
    )
    ...
  end

but I wish I could centrilize it in, for example, <LiveToast.toast_group /> but it didn’t work.

if you find out a way please let me know

1 Like
9

No, unfortunately I haven’t found a way to use it, so i returned to good old put_flash