Global Toast System
Learn how to build a global toast system with Spruce and Alpine.
Installation
InstallationCreating a store
Begin by creating a new store called toast
.
This store needs to hold all of the toasts to be displayed, so add a new toasts
property.
To make adding a new toast simple, define a new method called add()
. This method should accept a single argument, message
.
The new add(message)
method needs to append the message
to the toasts
property. This can be done using the Array.push
method.
Outputting toasts on the page
You can use Alpine to output the toasts on the page. The best way to do this is using Alpine's x-for
directive.
Removing toasts on click
To remove a toast when it has been clicked, you can add an event listener to the toast itself and modify the global store.
Begin by adding a new remove
method to the toast
store. This method should accept the index of the toast you want to remove.
You will also need to pull the index
into the x-for
loop. Alpine uses the (item, index)
syntax for this.
To improve the usability of this, you could wrap the toast in a <button>
so that it is more semantically accurate.
Styling the toast component
Now that the toasts are being output on the page, go ahead and style them accordingly.
The most common approach to this is having them float in one position on the page, normally in the bottom corner or at the very top.
Last updated