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

mhanberg
I just released the first version of Temple: an HTML DSL for Elixir and Phoenix! You can read this blog post or the docs for more info...
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
woylie
I released Doggo, a collection of unstyled Phoenix components. Features Unstyled Phoenix components. Storybook that can be added to...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 49522 488
New
OvermindDL1
Been making an MLElixir thing (not released yet…) for fun in spare time in the past day. I’m just trying to see how much I can get an ML...
132 13487 106
New
danschultzer
In short Plug n’ play OAuth 2.0 provider library. Just set up a resource owner schema with Ecto (your user schema), install the dependen...
New
benlime
LiveMotion enables high performance animations declared on the server and run on the client. As a follow up to my previous thread A libr...
New
Crowdhailer
Experimenting with this code. OK.try do user <- fetch_user(1) cart <- fetch_cart(1) order = checkout(cart, user) save_or...
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
bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
381 12391 119
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
New
vac
Hi, I'm quite new in Elixir and I'm trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New

Sub Categories:

We're in Beta

About us Mission Statement