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.
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.
You can install the package from the npm.js repository. To do this, you can run one of the following commands:
yarn add toastify
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'
const Toastify = require('toastify')
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.
Documentation on the remaining options, can be found on the GitHub repository here.
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