zero setup toaster library for HTMX
npm install htmx-toaster- 2.5kb gzipped ( 4kb with IE11 support)
- language agnostic
- no build steps
- customizable theme
- Swipe to dismiss gesture
- Automatic dismiss after 5s
- Max 3 toasts can be visible at one time
``html`
`html`
IE11 Compatible version
`html`
``
npm install htmx-toaster --save
`js`
import "htmx-toaster";
#### Option 1: HX-Trigger with the HXToast event.
HXToast takes two keys
1. body - sets the body of the toasttype
2. - optional parameter to choose type of toast
`go{"HXToast":{"body":"This is the text that will show up in the body of the toast"}}
// omitting type will render the default style
w.Header().Set("HX-Trigger", ){"HXToast":{"type":"success","body":"This is the text that will show up in the body of the toast"}}
// type can be "default", "success", "info", "error"
w.Header().Set("HX-Trigger", )`
#### Option 2: Custom HXToaster headers
HXToaster-Body - sets the body of the toast
`go`
w.Header().Set("HXToaster-Body", "This is the text that will show up in the body of the toast")
HXToaster-Type - optional parameter to choose type of toast
`go`
// "default", "success", "info", "error"
w.Header().Set("HXToaster-Type", "success");
`html`
an additional property data-htmxt-colors can be added to the script to customize the theme
add your colors in the following order
DEFAULT;TEXT;SUCCESS;INFO;ERROR
`html`
if you want to leave a certain color leave as empty and it will use the default theme
`html``