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

wmnnd
Hi there, for my project DBLSQD, I needed a file storage solution that is a bit more flexible than Arc. Because I thought others might f...
New
mischov
import Meeseeks.CSS html = HTTPoison.get!("https://news.ycombinator.com/").body for story <- Meeseeks.all(html, css("tr.athing")) do...
New
dominicletz
Hi, I thought I had posted my library before but seems I hadn’t. The project is still in early stages but it’s growing and so I think it...
New
tfwright
After working on it for a couple of months and using it in production for most of that time, today I’ve released LiveAdmin, a LiveView ba...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New
zorbash
I created Kitto a framework for dashboards inspired by Dashing. The distributed characteristics of Elixir and the low memory footprint...
New
Azolo
Hey everyone, I just released WebSockex which is a Elixir WebSocket client. WebSockex strives to work as a OTP special process, be RFC6...
New
scohen
Lexical Lexical is a next-generation language server for the Elixir programming language. Features Context aware code completion As-you...
New
tmbb
I’ve decided to create this topic to discuss optimization possibilities for something like Phoenix LiveView. I’ve created this topic unde...
144 10187 141
New
pkrawat1
Hey guyz We at @aviabird are working on a payment library in elixir/phoenix. We are targeting March 2018 to add 56 Gateways to it. Have...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

We're in Beta

About us Mission Statement