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 () {}
});
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
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);
}],
]
});
