Simple Toast Notification System – Toastinette.js

Category: Javascript , Notification | October 26, 2022
Author:SkyyInfinity
Views Total:797 views
Official Page:Go to website
Last Update:October 26, 2022
License:MIT

Preview:

Simple Toast Notification System – Toastinette.js

Description:

Toastinette.js is a tiny JavaScript toast notification component that provides a simple, elegant, and immediate way to give feedback to end users.

How to use it:

1. Download and import the Toastinette.js as a module.

import Toast from "./toast.js";

2. Display a basic toast message on the screen.

let toast = new Toastinette({
    message: 'A basic toast message.',
});

3. Add a title to the toast message.

let toast = new Toastinette({
    message: 'A basic toast message.',
    title: 'A toast title',
});

4. Set the position of the toast message.

  • ‘top-left’
  • ‘top-center’ (default)
  • ‘top-right’
  • ‘bottom-left’
  • ‘bottom-center’
  • ‘bottom-right’
let toast = new Toastinette({
    message: 'A basic toast message.',
    position: 'top-center',
});

5. Set the notification type.

  • ‘success’ (default)
  • ‘error’
  • ‘info’
  • ‘warning’
let toast = new Toastinette({
    message: 'A basic toast message.',
    type: 'info',
});

6. Determine whether to auto dismiss the toast message after a timeout. number OR Boolean.

let toast = new Toastinette({
    message: 'A basic toast message.',
    autoClose: 5000,
});

7. Determine whether to display a progress bar under the toast message.

let toast = new Toastinette({
    message: 'A basic toast message.',
    progress: true,
});

Changelog:

10/26/2022

  • Bugfix

You Might Be Interested In:


Leave a Reply