`

$3

notificationText

This is the string that will be rendered in the notification.

_It is not part of the {}_

wrapperId

This is the wrapping element of the notification.

templateId

This is the notification component HTML that will be added to the wrapper.

templateFile

This is an alternative choice to templateId which will get the notification
component HTML from the file specified.

autoClose

This will set the attribute data-notify-show to false once the duration (in
milliseconds) is up.

autoRemove

Here you have two options.

Duration

If you use a duration (in milliseconds) then it will remove the notification
from the DOM once duration is up.

This works for most situations, however it can get a little tricky calculating
when the removal should happen when working with animations. This is what the
boolean approach solves.

Boolean

Using a boolean will trigger the removal of the notification once the animation
has ended. It will play the animation in full and then remove once complete.

classNames

A string of classes to add to the notification.

$3

You don't need to pass the same options for multiple notifications. If all your
notifications are using the options from the example you can do this instead.

`html

`

Then all notifications that don't specify their own notificationOptions will
use this.

Animating Notifications

In this example I'll be using Tailwind CSS, but you can easily replicate this
with CSS.

Let's say you want the notification to slide in from the right and then slide
out, you could do the following.

`html

`

The animate-slide- classes have been added to the Tailwind CSS config.

`js
module.exports = {
theme: {
extend: {
animation: {
'slide-in': 'slide-in 0.15s ease-in forwards',
'slide-out': 'slide-out 0.15s ease-in forwards',
},
keyframes: {
'slide-in': {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(0)' },
},
'slide-out': {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(100%)' },
},
},
},
},
}
`

Dismiss Notification

If you want to have dismissible notifications you can add Alpine JS logic to
your notification template.

`html

`

Using a File

If preferred, you can create HTML files for your notification templates.

`html


x-on:click="$notify('Hello there, I am a notification!', {
wrapperId: 'notificationWrapper',
templateFile: 'notification.html',
autoClose: 3000,
autoRemove: 4000
})"
>
Notify

`

This is now looking for a file called notification.html which might look
something like this.

`html



`

It works the exact same as templateId but it means you don't have