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

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 Libraries Top

ahamez
Hi everyone, I’ve been working on this protobuf library for 3 years. We use it in the company I work for, EasyMile, to communicate with ...
New
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
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
praveenperera
FastRSS Parse RSS feeds very quickly: This is rust NIF built using rustler Uses the RSS rust crate to do the actual RSS parsing Speed...
New
zoltanszogyenyi
Hey everyone :wave: Excited to join this forum - I am one of the founders and current project maintainers of a popular and open-source U...
New
deadtrickster
I’ve just released stable versions of my Prometheus Elixir libs: Elixir client [docs]; Ecto collector [docs]; Plugs instrumenter/Export...
New
Qqwy
Hello everyone, I wrote a small library today called MapDiff. It returns a map listing the (smallest amount of) changes to get from map...
New
Antrater
Hi everyone! I’m thrilled to announce a huge thing. We have been developing Elixir Moon Design System for quite a while. We are finally ...
New
ericlathrop
I built a silly site for Halloween that uses Phoenix Channels on the backend, and React on the frontend. I had many problems integrating ...
New
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

Other popular topics Top

jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
lk-geimfari
What is most correct way to open, read and parse JSON file with poison? For example if we have example.json file in root of some projec...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
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
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New

Sub Categories:

We're in Beta

About us Mission Statement