anken
Hey, I created a hook to automatically clear flash messages after 5 seconds, in case it’s of anyone’s interest 
Here’s the code
// app.js
let liveSocket = new LiveSocket("/live", Socket, {
// ...
hooks: {
AutoClearFlash: {
mounted() {
let ignoredIDs = ["client-error", "server-error"];
if (ignoredIDs.includes(this.el.id)) return;
let hideElementAfter = 5000; // ms
let clearFlashAfter = hideElementAfter + 500; // ms
// first hide the element
setTimeout(() => {
this.el.style.opacity = 0;
}, hideElementAfter);
// then clear the flash
setTimeout(() => {
this.pushEvent("lv:clear-flash");
}, clearFlashAfter);
},
},
},
});
I also created a post on dev.to with more details: Automatically clearing flash messages in Phoenix LiveView - DEV Community
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #metaprogramming
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
kblake
Simple and works well. Thanks!
xir
It’s a nice solution! However, while testing it by triggering an event that causes a flash notification multiple times within the preconfigured 5 seconds, I consistently encountered the following error:
So, I slightly modified it, probably not perfectly, by wrapping
this.pushEventin the followingifclause:anken
Interesting edge case! It never happened to me, but I never really stress tested my solution. Thanks for sharing the issue and your solution!