IziToast Javascript Elegant Notification Toast Alert Library Full Crash Course with Examples

IziToast Javascript Elegant Notification Toast Alert Library Full Crash Course with Examples

 

Welcome folks today in this blog post we will be looking at an izitoast open source toast notification library. All the examples will be given below.

 

 

Installation

 

 

In order to install this library we can include it by cdn

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css"/>

 

javascript

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>

 

 

Now we can also use this as npm dependency

 

 

npm i izitoast

 

 

Basic Example

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"
    />
  </head>
  <body>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
  <script>
    iziToast.show({
    title: 'Hey',
    message: 'What would you like to add?'
});
  </script>
</html>

 

 

 

 

 

Default Options

 

 

iziToast.show({
    id: null, 
    class: '',
    title: '',
    titleColor: '',
    titleSize: '',
    titleLineHeight: '',
    message: '',
    messageColor: '',
    messageSize: '',
    messageLineHeight: '',
    backgroundColor: '',
    theme: 'light', // dark
    color: '', // blue, red, green, yellow
    icon: '',
    iconText: '',
    iconColor: '',
    iconUrl: null,
    image: '',
    imageWidth: 50,
    maxWidth: null,
    zindex: null,
    layout: 1,
    balloon: false,
    close: true,
    closeOnEscape: false,
    closeOnClick: false,
    displayMode: 0, // once, replace
    position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
    target: '',
    targetFirst: true,
    timeout: 5000,
    rtl: false,
    animateInside: true,
    drag: true,
    pauseOnHover: true,
    resetOnHover: false,
    progressBar: true,
    progressBarColor: '',
    progressBarEasing: 'linear',
    overlay: false,
    overlayClose: false,
    overlayColor: 'rgba(0, 0, 0, 0.6)',
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOut',
    transitionInMobile: 'fadeInUp',
    transitionOutMobile: 'fadeOutDown',
    buttons: {},
    inputs: {},
    onOpening: function () {},
    onOpened: function () {},
    onClosing: function () {},
    onClosed: function () {}
});

 

See also  FFMPEG Tutorial to Add Image Watermark to a Video Full Tutorial 2020 For Beginners

 

 

Dark theme and colorful alert notifications

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"
    />
  </head>
  <body>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
  <script>
    iziToast.show({
    title: 'Hey',
    message: 'What would you like to add?',
    color:"red",
    theme:"dark",
    messageColor:'black'
});
  </script>
</html>

 

 

 

 

 

 

Success Notification Example

 

 

iziToast.success({
    title: 'OK',
    message: 'Successfully inserted record!',
});

 

 

 

 

 

 

Error Alert Notification

 

 

See also  Build a Bootstrap 4 jQuery HEX Code Color Picker Web App in Browser Using HTML5 & Javascript Full Project For Beginners

 

iziToast.error({
    title: 'Error',
    message: 'Illegal operation',
});

 

 

 

 

 

Warning Alert Notification

 

 

iziToast.warning({
    title: 'Caution',
    message: 'You forgot important data',
});

 

 

 

 

 

Info Alert Notification

 

 

iziToast.info({
    title: 'Hello',
    message: 'Welcome!',
});

 

 

 

 

 

 

Question Alert Notification

 

 

 

iziToast.question({
    timeout: 20000,
    close: false,
    overlay: true,
    displayMode: 'once',
    id: 'question',
    zindex: 999,
    title: 'Hey',
    message: 'Are you sure about that?',
    position: 'center',
    buttons: [
        ['<button><b>YES</b></button>', function (instance, toast) {
 
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
 
        }, true],
        ['<button>NO</button>', function (instance, toast) {
 
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
 
        }],
    ],
    onClosing: function(instance, toast, closedBy){
        console.info('Closing | closedBy: ' + closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.info('Closed | closedBy: ' + closedBy);
    }
});

 

 

 

 

 

 

User Input Alert

 

 

 

iziToast.info({
    timeout: 20000,
    overlay: true,
    displayMode: 'once',
    id: 'inputs',
    zindex: 999,
    title: 'Inputs',
    message: 'Examples',
    position: 'center',
    drag: false,
    inputs: [
        ['<input type="checkbox">', 'change', function (instance, toast, input, e) {
            console.info(input.checked);
        }],
        ['<input type="text">', 'keyup', function (instance, toast, input, e) {
            console.info(input.value);
        }, true],
        ['<input type="number">', 'keydown', function (instance, toast, input, e) {
            console.info(input.value);
        }],
    ]
});

 

See also  Build Node.js + React.js Razorpay Payment Gateway Integration Web App in Browser Using TypeScript Full Project For Beginners

 

 

 

 

Leave a Reply