Customizable Message Toaster In Vanilla JavaScript – Toast

Preview:

Description:

Yet another Vanilla JS message toaster library lets you generate highly customizable toast messages on the web app.

How to use it:

Import the Toast’s JavaScript and Stylesheet into the document.

<link href="toast.css" rel="stylesheet">
<script src="toast.js"></script>

Create a new Toast instance and define the title & content to display in the toast message.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content' 
})

Show the toast message when needed.

myToast.show();

The toast message will automatically destroy itself after 3 seconds. You’re able to adjust the timeout in the JavaScript on init.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content',
    timeout: 3000
})

Re-position the toast message. Default: Top Center.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content',
    // 'top right (default)', 'top center', 'top left', 'right center', 'center', 'left center', 'bottom right', 'bottom center', 'bottom left'
    position: 'top right'
})

Set the notification type.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content',
    // warning, info, success, caution
    type: 'warning'
})

Set the easing function.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content',
    // 'expo-in', 'expo-out', 'expo-in-out', 'back-in', 'back-out', 'back-in-out', 'quart-in', 'quart-out', 'quart-in-out'
    easing: 'quart-in-out'           
})

Display a progress bar to indicate how many time left to close the toast message.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content',
    showProgress: true        
})

Append the toast message to a specific container.

var myToast = new Toast({
    title: 'Toast Title', 
    content: '<b>Toast</b> Content',
    append: false // selector
})

Changelog:

05/10/2019

• Bugfix