Mininal Android Toast Message In JavaScript – js-toastr

Category: Javascript , Notification | August 8, 2020
Author:rabhinav77
Views Total:104 views
Official Page:Go to website
Last Update:August 8, 2020
License:MIT

Preview:

Mininal Android Toast Message In JavaScript – js-toastr

Description:

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');

You Might Be Interested In:


Leave a Reply