Mininal Android Toast Message In JavaScript – js-toastr

A tiny and easy JavaScript plugin to create minimal-looking, Android-like toast messages (notifications) with 4 themes and 6 position options.

How to use it:

1. Install & Import the js-toastr as a component.

# Yarn
$ yarn add js-toastr
# NPM
$ npm i js-toastr --save

import toastr from 'js-toastr';

2. Or download the package and insert the toast.min.js and toast.min.css into the HTML.

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

3. Create a toast message with the following parameters:

• Message: Toast message
• Type: ‘success’, ‘error’, info’, or ‘warning’
• Duration: Auto dismiss the toast message after this timeout

// toastr.message(message, type, duration);
toastr.message('Success Toast Message', 'success', 5000);
toastr.message('Success Toast Message', 'error', 5000);
toastr.message('Success Toast Message', 'info', 5000);
toastr.message('Success Toast Message', 'warning', 5000);

4. Change the position of the toast message. Default: ‘top-right’.

toastr.setPosition('top-center');
toastr.setPosition('bottom-center');
toastr.setPosition('top-left');
toastr.setPosition('bottom-left');
toastr.setPosition('top-right');
toastr.setPosition('bottom-right');