October 10, 2021

How to Show Toast Message in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to show toast message in javascript. The toast message behaves like a toast popping out of a toaster and that is why it is called a toast message.

A toast message is a notification that gets delivered in the form of a small popup. This small popup does not occupy too much space. It appears only for a couple of seconds, generally a second or two; however, such behavior can be changed.

You must have seen a notification when you perform certain actions on a website. These actions are generally CRUD operations and the notification includes success, error, or warning message related to that.

If you are a newbie, creating a toast message in javascript is not easy. I also do not even recommend you to do so because there are already a lot of third-party libraries that are well tested and work without any issue. Creating a toast message functionality from scratch is like reinventing a wheel.

The third-party library which I am going to use is Native Toast JS. I would not say that it is very popular but it does serve our purpose. With minimal setting and styling, you can implement toast message functionality in your website. Please have a look over its github repo to learn more about it.

In the following example, we have one button element. Upon click of a button, we will display a toast message on the screen for 10 seconds and then it will disappear automatically. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button).

The div element is just a wrapper for the button element. We are using the style attribute to center align the button element horizontally.
The button element has “Click Here” as innerText.
We have added the native-toast.css file using the link tag. This file contains default styles for our toast message.

We have added a minified version of Native Toast JS using the script tag.
We are using a CDN link here for both CSS file and minified javascript file, but you can also download them and host them locally on your server.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/native-toast@2.0.0/dist/native-toast.css">
    <title>Document</title>
</head>
<body>
      
    <div style="text-align: center">
        <button>Click Here</button>
    </div>

    <script src="https://unpkg.com/native-toast@2.0.0/dist/native-toast.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Javascript

We have selected the button element using the document.querySelector() method and attached click event listener to it.
In the event handler function, we are calling the nativeToast() method of Native Toast JS with an options object as a parameter. You can use this options object to completely customize the toast message. You can specify message, icon, timeout duration, position, etc for the toast message in this options object.

The elements property is completely optional like other options and it takes an array of HTML elements to insert after the message.
We have createElement() method and this method returns an HTML element. Inside this method, we have created a div element and an input element using a document.createElement() method and stored them in the el and child variables respectively.
We have appended the input element to the div element using the appendChild() method.

We are using return statement to return our newly created div element.

document.querySelector('button').addEventListener('click', () =>{
    nativeToast({
        message: 'wait wait!',
        position: 'center',    
        rounded: true,
        timeout: 10000,
        type: 'error',
        icon: false,
        edge:true,
        closeOnClick: false,
        elements: [createElement()]
      })
})

function createElement(){
    let el = document.createElement('div');
    let child = document.createElement('input');
    el.appendChild(child);
    return el;
}

You May Also Like: