Deprecated. And all the functionalities have been moved to https://github.com/cozy-elixir/shino.
A drop-in replacement for notification system in Phoenix.
Add :phoenix_notif to the list of dependencies in mix.exs:
def deps do
[
{:phoenix_notif, "~> <version>"}
]
endImport the frontend package shipped with this above Hex package from ../deps/phoenix_notif.
import createPhoenixNotifHook from "phoenix_notif"
const liveSocket = new LiveSocket("/live", Socket, {
hooks: {
PhoenixNotif: createPhoenixNotifHook(),
},
})// Edit tailwind.config.js
module.exports = {
content: [
// ...
"../deps/phoenix_notif/lib/**/*.*ex",
// ...
],
}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 %>PhoenixNotif provides two types of notifications.
- Flash
- Toast - allows multiple notifications to show for each kind of toast.
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.")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
endUse 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- Tune the components by following:
MIT