View Source PhoenixNotif
A drop-in replacement for notification system in Phoenix.
Installation
1. add Hex package
Add :phoenix_notif
to the list of dependencies in mix.exs
:
def deps do
[
{:phoenix_notif, "~> <version>"}
]
end
2. add NPM package
Import the frontend package shipped with this above Hex package from ../deps/phoenix_notif
.
3. create and use the hook
import createPhoenixNotifHook from "phoenix_notif"
const liveSocket = new LiveSocket("/live", Socket, {
hooks: {
PhoenixNotif: createPhoenixNotifHook(),
},
})
4. help Tailwind looking for class names
// Edit tailwind.config.js
module.exports = {
content: [
// ...
"../deps/phoenix_notif/lib/**/*.*ex",
// ...
],
}
5. use components provided by this package
Finally, replace your <.flash_group />
component with the new components.
It's most likely in the app.html.heex
:
<!-- Remove this! -->
<.flash_group flash={@flash} />
<!-- And replace it with this: -->
<PhoenixNotif.connection_group position={:bottom} />
<PhoenixNotif.notification_group flash={@flash} connected={assigns[:socket] != nil} />
<%= @inner_content %>
Usage
PhoenixNotif
provides two types of notifications.
- Flash
- Toast - allows multiple notifications to show for each kind of toast.
Using Flash
It's supported by DeadView and LiveView.
Flash is provided by Phoenix flash system, which only allows one notification to show for each kind of flash.
Use put_flash/3
.
push_flash(conn, :info, "Upload successful.")
push_flash(socket, :info, "Upload successful.")
Using Toast
It's supported by LiveView only.
Use put_toast/4
:
defmodule DemoWeb.HomeLive do
def handle_event("submit", _payload, socket) do
socket = socket
|> put_toast(:info, "Upload successful.", [title: "Status"])
{:noreply, socket}
end
end
Use send_toast/3
:
defmodule DemoWeb.HomeLive do
def handle_event("submit", _payload, socket) do
PhoenixNotif.send_toast(:info, "Upload successful.", [ title: "Status" ])
{:noreply, socket}
end
end
License
MIT