Here is a solution using hooks. It hides info flash messages after 10 seconds and leaves error flash messages open until the user closes them.
Create a file called hooks.js for your hooks.
// assets/js/hooks.js
let Hooks = {}
Hooks.HideFlash = {
mounted() {
setTimeout(() => {
this.pushEvent("lv:clear-flash", { key: this.el.dataset.key })
this.el.style.display = "none"
}, 10000)
}
}
export default Hooks
Don’t forget to add your hooks to your liveview socket.
// assets/js/app.js
// ...
let liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500,
params: {_csrf_token: csrfToken},
hooks: Hooks,
})
// ...
Add the hook to the flash component.
# core_components.ex
def flash(assigns) do
assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
~H"""
<div
:if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
id={@id}
phx-hook={@kind == :info && "HideFlash"}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert"
class={[
"fixed top-2 right-2 mx-2 min-w-80 max-w-xl z-50 rounded-lg p-3 ring-1",
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
@kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
]}
{@rest}
>
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
<%= @title %>
</p>
<pre class="mt-2 text-sm leading-5 whitespace-pre-wrap"><%= msg %></pre>
<button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
</button>
</div>
"""
end
