Toastr.js: an android toast like notification plugin for web

About

Toastr.js is a notification plugin for web that looks like android's toast notification.

Toastr.js is written in vanilla javascript and it is lightweight yet provides various customization options.

The default style will be a replica of android toast but you can change the appearance and behaviour through overriding the default options.

Dependencies

Since this plugin is entirely written in vanilla javascript, you don't need any additional dependencies

Setup

Include toastr.min.css inside head tag and include toastr.min.js inside your body tag, ideally just before the closing of body tag.

<!DOCTYPE html>
<html>
<head>
    <link href="dist/toastr.min.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="dist/toastr.min.js"></script>
</body>
</html>

Basic Usage

Once the css and js files have been included in your page properly, you can initialize the toastr plugin and call show method to trigger a notification, which will render a default toast notification in your page with autohide mode

<script>
var toastr = new Toastr();
toastr.show('Hi there! This is a Toast.');
</script>

If you want to override default options, for instance, if you want to disable autohide and hide the notification manually you can do like this.

<script>
var option = {
    'autohide': false
};
var toastr = new Toastr(option);
toastr.show('Hi there! This is a Toast.');
</script>

Then you can call hide method to remove the notification manually.

<script>
toastr.hide();
</script>

You can see the detailed list of all available options to override below.

Options

Option
Value
Description
theme
String
(default: default)
Changes the overall apperance. Available values are
default, moon, sun, ocean, grassland, rainbow
position
String
(default: bottomCenter)
Changes the position where the notification appears. Available values are
bottomCenter, bottomLeft, bottomRight, topCenter, topLeft, topRight
timeout
Integer
(default: 2000)
Duration of autohide given in milliseconds
animation
String
(default: fade)
Notification's enter and exit animations. Available options are
fade, slide
autohide
Boolean
(default: true)
Determines whether the notification should autohide or not