Lightweight Info/Warning/Error/Danger Toast Notification Library – Toasteur.js

Preview:

Description:

Toast notifications are becoming all the rage. They’re picked up by iOS, Android and Windows.

Toasteur.js is a toast notification library that gives you a unique way of displaying nice, customizable, info/warning/error/danger toast message boxes to your visitors. Inspired by CodeSeven’s Toastr plugin.

It’s also lightweight so it feels snappy when loading or losing focus on the page. Most importantly though, it’s easy to implement. No complicated configuration, no jQuery required!

How to use it:

1. Download and load the Toasteur.js plugin’s files in the document.

# Install & Download
$ npm i toasteur

<link rel="stylesheet" href="dist/themes/toasteur-default.min.css" />
<script src="dist/toasteur.min.js"></script>

2. Initialize the Toasteur.js and determine at which position the toast notifications should stay.

• top-left
• top-right
• bottom-left
• bottom-right
• top-center
• bottom-center

let myToasteur = new Toasteur("top-right");

3. Set the time to wait before auto-dismissing the toast notifications.

let myToasteur = new Toasteur("top-right", 5000);

4. Create toast notifications on the screen.

// Success
myToasteur.success('Toast Message', 'Toast Title', () => {
  // do something when clicked
})
// Error
myToasteur.error('Toast Message', 'Toast Title', () => {
  // do something when clicked
})
// Info
myToasteur.info('Toast Message', 'Toast Title', () => {
  // do something when clicked
})
// Warning
myToasteur.warn('Toast Message', 'Toast Title', () => {
  // do something when clicked
})

Changelog:

v0.5.0 (08/20/2022)

• Allow custom html in toasts content

v0.4.0 (06/07/2022)

• New positions : top-center, bottom-center

v0.3.0 (05/30/2022)

• Allow to put notifications on top or bottom of the pile