Nowadays thanks to the growing use of web technologies like web-sockets, web applications are getting smarter and smarter. We can now write interactive and intuitive systems using JavaScript. Quite often web applications need to inform the user of something. This could be that the action they just carried out was successful, or they could be notifying the user of an important piece of information that they need to pay attention to. These can be done using toaster notifications.

What are Toaster Notifications?

Toaster notifications are small, popup-style notifications that appear in the users browser. They are often different colours to represent different results, such as red for failure and green for success. These types of notifications are great for the user for a number of reasons. Firstly, they are non-intrusive. They don’t distract the user too much from the content on the page, whereas something like a sweetalert box would. Also, they allow the user to continue using the application, without having to carry out an action to continue; such as clicking an “OK” button.

Introducing, Toastify!

Shameless plug here, Toastify is an open source toaster notification package that I released. Now you may be saying, “there are loads of toaster notification packages”… and you’d be right! So why did I create it? Well I was mainly looking for one with no-dependencies. At the time I was working on a Vue.JS application, however another application we were working on was written using Angular. Neither of these applications used jQuery so I wanted something that would work across both easily… and voila! Toastify was born. It’s written in typescript and doesn’t require any dependencies! So, let’s begin.

Installation and Setup

You can install the package from the npm.js repository. To do this, you can run one of the following commands:

yarn add toastify

or

npm install --save toastify

Once this has been installed, you then need to import the package to your application. You can do this one of the following ways:

Import Toastify from 'toastify'

or

const Toastify = require('toastify')

Configuration

There are a number of configuration options that can be set. These are position, delay, element and speed. In order to configure one of these options, you simply need to call the setOption method, passing the key and value as parameters. An example of setting a configuration option can be seen below.

Toastify.setOption('delay', 5000)

Documentation on the remaining options, can be found on the GitHub repository here.

Rendering Notifications

At present, there are four different notification levels that are supported. These are default, success, info, warning and error. To render a notification in the page, simply run the following code Toastify.success('Title', 'this is the body of the notification'). As you can see, the method accepts two parameters, one for the title and one for the body.

If you have any questions, feel free to catch up with me on Twitter