For this entry I wanted to go over how I changed the core components for the flash_group so that the message only stays up for a certain amount of time.

I wanted the user to be able to see what they are doing without having to clear the message every time.

In order to do this I had to find the function definition within the core_components.ex

Once there you will find everything that the function will display.

attr :flash, :map, required: true, doc: “the map of flash messages” attr :id, :string, default: “flash-group”, doc: “the optional id of flash container”

def flash_group(assigns) do

~H"""
<div id={@id}>
  <.flash
    kind={:info}
    title={gettext("Success!")}
    flash={@flash}

  />
  <.flash
    kind={:error}
    title={gettext("Error!")}
    flash={@flash}

  />
  <.flash
    id="client-error"
    kind={:error}
    title={gettext("We can't find the internet")}
    phx-disconnected={show(".phx-client-error #client-error")}
    phx-connected={hide("#client-error")}
    hidden
  >
    {gettext("Attempting to reconnect")}
    <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
  </.flash>

  <.flash
    id="server-error"
    kind={:error}
    title={gettext("Something went wrong!")}
    phx-disconnected={show(".phx-server-error #server-error")}
    phx-connected={hide("#server-error")}
    hidden
  >
    {gettext("Hang in there while we get back on track")}
    <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
  </.flash>
</div>
"""

end

This is the part I’m talking about. We want to add the following to any of the flash messages that we want to have a limited time to show.

    phx-hook="AutoDismiss"
    data-timeout="3000"

Once that is done we need to be sure to add in the Hook

Hooks.AutoDismiss = { mounted() {

// Get the timeout value from the data attribute
const timeout = this.el.dataset.timeout || 5000; // Default to 5000ms if not provided

// Set a timeout to hide the flash message
setTimeout(() => {
  this.el.style.opacity = "0";  // Fade out
  setTimeout(() => {
    this.el.remove();  // Completely remove the flash message from DOM after fade-out
  }, 500);  // Time for fade-out effect
}, timeout);

} }

That should be it. If you want to change the values that we send (time the message will stay up), just change the value for data-timeout #to amount of time in milliseconds