Minimal Responsive Toast Notification Library – ToastMaker

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