zero-setup, customizable server-triggered notifications for HTMX

- 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

Installation

$3

``html

`

$3

`html

`

IE11 Compatible version

`html

`

$3

`
npm install htmx-toaster --save
`

`js
import "htmx-toaster";
`

Usage

$3

#### Option 1: HX-Trigger with the HXToast event.

HXToast takes two keys

1. body - sets the body of the toast
2. type - optional parameter to choose type of toast

`go
// omitting type will render the default style
w.Header().Set("HX-Trigger", {"HXToast":{"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", {"HXToast":{"type":"success","body":"This is the text that will show up in the body of the toast"}})
`

#### 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");
`

$3

`html

`

Customize theme

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


``