Notification Alert Library
Mega Alert is a library for add notifications alerts for website or the web applications.
To install this package you can use the below npm command.
npm install mega-alertor inline
<script src="mega-alert.min.js"></script><head>
<link rel="stylesheet" href="mega-alert.min.css">
</head>
<body>
<div id="mega-alert-container">
</body>// Require module
var MegaAlert = require('mega-alert');
// Default configurations
let options = {
theme: "light",
position: "bottom-right",
icon: true,
closeIcon: true,
animation: true,
leftBorderColor: true,
autoClose: 5000,
};
// Initialize
const megaAlert = MegaAlert("#mega-alert-container", options);
// Error Alert
megaAlert.error();
// Success Alert
megaAlert.success();
// Warning Alert
megaAlert.warning();
// Inoformation Alert
megaAlert.info();Not only that but also you can change the default title and the paragraph like this.
// Initialize
const megaAlert = MegaAlert("#mega-alert-container", options);
// Error Alert
megaAlert.error({
titleVisibility: true,
paragraphVisibility: true,
title: "Here is the title",
paragraph: "Here is the alert paragraph",
buttons: [
{
buttonName: "Close",
onClick: function (alert) {
megaAlert.removeAlert(alert);
}
}
]
});Using the above configurations you can control the title and paragraph with custom text and visibility. Not only that you can use custom buttons for the alerts. In there, you can declare buttons as objects. As parameters it will take the buttonName and the onClick listener.
Mega alert also provide the loading alert. Here is the usage.
// Initialize
const megaAlert = MegaAlert("#mega-alert-container", options);
// Loading Alert
megaAlert.loading({
title: "Here is the title",
paragraph: "Here is the alert paragraph",
});In the loading alert also you can add the title and the paragraph as a parameters. Configurations are not required.
This alert is provided to the control the return on the promises. Here is the code example.
// Initialize
const megaAlert = MegaAlert("#mega-alert-container", options);
// Promise Alert
const promise = new Promise((resolve, reject) => {
// Simulate an asynchronous operation
setTimeout(() => {
const randomNumber = Math.random();
if (randomNumber > 0.5) {
resolve("Promise resolved successfully!");
} else {
reject("Promise rejected!");
}
}, 2000);
});
megaAlert.promise({
promise: promise, // Pass your promise here
title: "Promise in progress...",
promiseRejectTitle: "Promise is rejected",
promiseResolvedTitle: "Promise is resolved",
promiseRejectParagraph: "Promise is rejected because if the reason.",
promiseResolvedParagraph: "Promise is resolved because if the reason.",
});That means if promise is pending, it will shop the pending alert (like a loading), then if the promise will success it will show the success alert otherwise show the promise rejected alert. There are also some configurations for the control reject and the resolved alerts. (Check the above code)
Mega alert also provides the capabilities to remove the specific alert or all the alerts at once. Here is the code example.
// Initialize
const megaAlert = MegaAlert("#mega-alert-container", options);
// Alerts
const errorAlert = megaAlert.error();
const successAlert = megaAlert.success();
// Remove specific alert
megaAlert.removeAlert(errorAlert);
megaAlert.removeAlert(successAlert);
// Remove all the alerts
megaAlert.removeAllAlerts();You can also override the default css classes. Here are some examples.
.mega-alert-container {
width: 320px; /* Alert container width */
}
.mega-alert {
padding: 15px 12px; /* Alert box padding */
}
.mega-alert-icon {
width: 20px; /* Alert icon width */
height: 20px; /* Alert icon height */
}
.mega-alert-close-button {
width: 20px; /* Alert close button width */
height: 20px; /* Alert close button height */
}Here are all the configurations that mega alert takes.
let options = {
theme: "light",
position: "bottom-right",
icon: true,
closeIcon: true,
animation: true,
leftBorderColor: true,
iconElement: "span",
setCustomIcons: {
error: "", // String, URL, Elements
warning: "",
info: "",
success: "",
},
titleFontSize: "10px",
paragraphFontSize: "10px",
autoClose: 5000,
progressBar: true,
closeOnBodyClick: true,
};This is a parameter that use for the change the alert theme. You can pass light, dark and colored as the parameters. This is a required parameter. Do not forget to add this.
This parameter is controls the positions of the alerts. For that you can pass top-left, top-right, bottom-left, bottom-right, top-center and bottom-center values. This is a required parameter. Do not forget to add this.
Using this parameter you can hide the alert icon. As the parameter it will take true or false. . Default value is false.
This is a parameter that you can use for hide and display close icon. This parameter also take the true or false. Default value is false.
This parameter can you for control the alert animation. That means when you put this as true alert will display with slide animation, also when it's close it will be slide and disappear. Default value is the false
Using this parameter you can add the left border to the alert. That border color will be according to the type of alert. This parameter also takes boolean values such as true and false. Default value is false.
This is a parameter that you can use to make custom icons with prefer tags. It will take any type of HTML tag. You have to pass the tag as a string. Default will be span.
Using this parameter you can customize each alert types. This parameter takes object of error, warning, info and success. For each sub-parameters you can pass either class name, url and html element.
This is a parameter that provides control the alert title font size. Default font size will be 12px.
This is a parameter that provides control the alert paragraph font size. Default font size will be 10px.
This parameter is use for set autoClose time. That means, when you put this parameter with 5000 the alert will disappear after 5 seconds. value is in milliseconds.
Using this parameter with autoClose option you can see the progress bar bottom of the alert. It will synchronize with the auto close time. Default will be false.
This is a parameter that can use for close alert when clicking on the alert body. You can use true or false for this parameter. Default will be false.
We appreciate your interest in Aqua IDE and value your feedback. If you encounter any issues, have suggestions for improvement, or would like to contribute to the project, please don't hesitate to open an issue on our GitHub repository.
Mega Alert is licensed under the MIT License. See the LICENSE file for more details.