Simple Toast Notification System – Toastinette.js

Preview:

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