Minimal Responsive Toast Notification Library – ToastMaker

Category: Javascript , Notification | July 24, 2020
Author: vivekweb2013
Views Total: 87 views
Official Page: Go to website
Last Update: July 24, 2020
License: MIT

Preview:

Minimal Responsive Toast Notification Library – ToastMaker

Description:

ToastMaker is a lightweight (less than 1kb, gzipped) JavaScript library to create responsive, configurable toast messages inspired by Android (Material Design).

How to use it:

1. Install and import the ToastMaker.

# Yarn
$ yarn add toastmaker

# NPM
$ npm i toastmaker --save
import ToastMaker from 'toastmaker';
import "toastmaker/dist/toastmaker.css";

2. Or load the ToastMaker’s files in the document.

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

3. Create a basic toast message.

ToastMaker('Basic Toast Message');

4. Auto dismiss after 5 seconds.

ToastMaker('Auto Dismiss After 5 Seconds', 5000);

5. Change the position of the toast message.

ToastMaker('Top Right Toast Message', 5000,  {

  // 'left', 'center', 'right'
  align: 'center', 

  // 'top', 'bottom'
  valign: 'bottom'
  
});

6. Apply additional CSS styles to the toast message.

ToastMaker('Top Right Toast Message', 5000,  {

  styles: { 
    /* CSS properties here */
  }
  
});

7. Or append additional CSS classes to the toast message.

ToastMaker('Top Right Toast Message', 5000,  {

  classList: ['custom-class-1', 'custom-class-2']
  
});

You Might Be Interested In:


One thought on “Minimal Responsive Toast Notification Library – ToastMaker

Leave a Reply