Simple Alert Popup JavaScript Library – Toastifier

Category: Javascript , Notification | April 20, 2021
Author: varun-singhh
Views Total: 161 views
Official Page: Go to website
Last Update: April 20, 2021
License: MIT

Preview:

Simple Alert Popup JavaScript Library – Toastifier

Description:

Toastifier is a simple yet highly customizable alert popup JavaScript library inspired by Material Toasts.

It can be used with any framework/library built using JavaScript.

Features:

  • Auto dismiss
  • 4 alert types: error, success, warn, info.
  • 4 fancy animations: flip, bounce, fade, zoom.
  • Pause the countdown timer on hover.
  • onClick function.
  • Custom styles.
  • With or without icons.

How to use it:

1. Install and import the Toastifier.

# Yarn
$ yarn add toastifier

# NPM
$ npm i toastifier
import 'toastifier/dist/toastifier.min.css';
import toastifier from 'toastifier';

2. Show a basic alert popup on the screen.

toastifier('Basic Alert');

3. Set the notification type:

  • error
  • success (default)
  • warn
  • info
toastifier('Alert Message Here',{
  type: 'warn'
});

4. Set the animation type:

  • flip
  • bounce (default)
  • fade
  • zoom
toastifier('Alert Message Here',{
  animation: 'flip'
});

5. Set the position of the alert popups.

  • top-left
  • top-center (default)
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right
toastifier('Alert Message Here',{
  position: 'top-left'
});

6. Set the duration of the animation. Default: 3000.

toastifier('Alert Message Here',{
  duration: 5000
});

7. Determine whether to pause the countdown timer on hover.

toastifier('Alert Message Here',{
  onhoverPause: true
});

8. Determine whether to show the icon in the alert popup.

toastifier('Alert Message Here',{
  showIcon: true
});

9. Trigger a function when the user clicks the alert popup.

toastifier('Alert Message Here',{
  onClick: function(){
    // ...
  }
});

10. More options to customize the alert popups.

toastifier('Alert Message Here',{

  // additional CSS rules here
  styleClass: {},

  // background color
  background: '#222'

  // text color
  text: '#fff'

  // border property
  border: '1px solid #222',

  // show box shadow
  shadow: true,
  
});

You Might Be Interested In:


Leave a Reply