kurmetaubanov

kurmetaubanov

PhoenixLiveViewFlashTimer - Auto-clear flash messages in LiveView

Hey everyone! :waving_hand:

I just published my first hex package that solves a common UX issue in Phoenix LiveView applications, and I’d love to share it with the community!

The Problem

Flash messages in Phoenix LiveView applications often stick around until the user navigates away or manually dismisses them. This can lead to cluttered UIs and poor user experience, especially for success messages like “Data saved!” that should naturally disappear after being read.

The Solution

PhoenixLiveViewFlashTimer automatically clears flash messages after a configurable timeout (default: 5 seconds). It handles both:

  • Controller-set flash messages (after form submissions, redirects, etc.)
  • LiveView put_flash calls

Quick Start

Add to your dependencies:

{:phoenix_liveview_flash_timer, "~> 0.1.0"}

For LiveView flash messages only:

def live_view do
  quote do
    use Phoenix.LiveView
    use PhoenixLiveViewFlashTimer
    
    # ... rest of your code
  end
end

For both controller AND LiveView flash messages:

def live_view do
  quote do
    use Phoenix.LiveView
    use PhoenixLiveViewFlashTimer
    on_mount PhoenixLiveViewFlashTimer  # Add this for controller flash support
    
    # ... rest of your code
  end
end

That’s it! Flash messages will now auto-disappear after 5 seconds.
Configuration

# config/config.exs
config :phoenix_liveview_flash_timer,
  default_timeout: 3000  # Custom timeout in milliseconds
Examples
elixir# In a LiveView - automatically cleared after 5 seconds
socket = put_flash(socket, :info, "Data saved successfully!")

# In a LiveView - custom timeout
socket = put_flash(socket, :error, "Something went wrong", 10000)

# In a controller - cleared when LiveView mounts (requires on_mount)
conn
|> put_flash(:info, "Account created successfully!")
|> redirect(to: ~p"/dashboard")

Features

:white_check_mark: Zero configuration required
:white_check_mark: Works with existing Phoenix LiveView apps
:white_check_mark: Configurable timeout per message or globally
:white_check_mark: Handles both controller and LiveView flash messages
:white_check_mark: Uses on_mount hook for universal coverage
:white_check_mark: Simple drop-in solution

Technical Details
The package uses Phoenix LiveView’s on_mount hook to automatically start timers for controller flash messages, and overrides put_flash to set timers for LiveView flash messages. It’s implemented as a simple macro that you can drop into any existing LiveView application without changing your existing code.
This was born out of a real need - I kept manually implementing flash message clearing in every LiveView project, so I decided to package it up and share it with the community!

I’m excited to hear your thoughts and feedback! This is my first hex package, so any suggestions are very welcome.
Thanks! :rocket:

Links

Hex: phoenix_liveview_flash_timer | Hex
Docs: phoenix_liveview_flash_timer v0.1.0 — Documentation

https://github.com/kurmetaubanov/phoenix_liveview_flash_timer

Most Liked

regex.sh

regex.sh

I wrote a blog about it some time ago, it maybe can help :slight_smile:

LostKobrakai

LostKobrakai

There’s no code in the module I linked to.

Where Next?

Popular in Announcing Top

OvermindDL1
I created a new library (rather I pulled out a couple files from my big project), it manages an operating system PID file for the BEAM. ...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
mischov
import Meeseeks.CSS html = HTTPoison.get!("https://news.ycombinator.com/").body for story <- Meeseeks.all(html, css("tr.athing")) do...
New
josevalim
Yes, yet another parser combinator library! Most of the parser combinators in the ecosystem are either compile-time, often using AST tra...
159 19228 141
New
mikehostetler
I’m excited to announce Jido, a framework providing foundational primitives for building autonomous agent systems in Elixir. While develo...
New
bryanjos
Hi, I just published version 0.23.0 of Elixirscript. https://github.com/bryanjos/elixirscript/blob/master/CHANGELOG.md Most of the chan...
New
blatyo
The best overview for how things are tied together is this presentation. Modules and functions are pretty well documented at this point, ...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36128 110
New
anshuman23
Hello all, I have been working on my proposed project called Tensorflex as part of Google Summer of Code 2018.. Tensorflex can be used f...
New
mattludwigs
Grizzly is a library for working with Z-Wave devices. Z-Wave is a low-frequency radio protocol for controlling smart home devices on a me...
New

Other popular topics Top

lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 47930 226
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

We're in Beta

About us Mission Statement