void Tricks Logo
void Tricks Logo

toastr.js: Android Style Toast Notification Plugin for Web (free)

toastr.js is a javascript library for showing toast notifications like android and toatsr can be customized and requires no dependencies.

toastr.js: Android Style Toast Notification Plugin for Web (free)

About toastr.js

First things first, it is toastr not toaster.

Since toastr.js is written in vanilla javascript, it is light weight and it doesn't require any additional dependencies.

toastr.js is developed with the intention of providing Android Toast style notifications for websites.

Although, the default style is the replica of Android toast, you can still customize it with available options like theme, position, animation etc...

Documentation

Setup

Download the zip file and extract it and copy toastr folder into your project.

Include toastr.min.js and toastr.min.css in your page.

<link rel="stylesheet" href="path_to_toastr/toastr.min.css">
<script src="path_to_toastr/toastr.min.js">

Instantiate

Create a new instance inside a DOMContentLoaded or $("document").ready function like below.

Call toastr.show(text) method to trigger a notification, you can pass raw text or HTML.

<script>    //JavaScript
    document.addEventListener("DOMContentLoaded", function(){
        //Instantiate
        var toastr = new Toastr();

        //Triggering notification when a button clicked
        document.getElementById("notify").addEventListener("click", function(){
            //Pass notification text to show method
            toastr.show('Hi there! This is a Toast.');
        });
    });

    //jQuery
    $("document").ready(function(){
        var toastr = new toastr();
        
        $("#notify").on("click", function(){
            toastr.show('Hi there! This is a Toast.');
        });
    });
</script>

Overriding Default Options

toastr.js allows you to pass options while instantiate that overrides the default options.

var toastr = new toastr({
    autohide: false,
    timeout: 1000,
    theme: 'ocean'
});

If you opt to disable autohide option you can manually hide the notification which may be your requirement in some cases.

toastr.hide();

toastr will do it for you otherwise.

Available Options

theme

Changes the main color shceme of the notification.

Datatype: string; Allowed values: (moon, sun, ocean, grassland, rainbow)

Default: android

position

Sets the position of the trigger icon.

Datatype: string; Allowed values: (topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight)

Default: bottomCenter

timeout

Sets the time interval between notification showing and hiding.

Datatype: float (milliseconds);

Default: (milliseconds) 2000

animation

Changes the animation of notification when it appears and hides.

Datatype: string; Allowed values: (fade, slide)

Default: fade

autohide

Controls whether you want the notification to hide automatically after triggering or not

Datatype: boolean; Allowed values: (true, false)

Default: true

Changelog

10/06/2019 - First version of the toastr.js library.

Comments (0)

SUBSCRIBE TO OUR NEWSLETTER