Toastify - JavaScript

Toastify is a lightweight, responsive, and customizable toast notification library for JavaScript applications. It simplifies the process of displaying unobtrusive popup messages in web applications.

Features

• Easy to use and customize
• Supports different types of toasts (success, error, warning, info)
• Supports different animations and positions
• Supports hiding toasts on click or automatically after a set time
• Supports custom HTML content

Installation

Toastify can be installed via NPM:

npm install toastify-js

Or you can include it in your HTML file using the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Usage

To use Toastify in your JavaScript code, simply create a new toast and show it:

Toastify({
  text: "Hello, world!",
  duration: 3000,   // Optional - Time in milliseconds to hide the toast
  newWindow: true,  // Optional - Open new window if the user clicks the toast
  close: true,      // Optional - Enable close button
  gravity: "top",   // Optional - Position of the toast
  backgroundColor: "#F0F0F0",  // Optional - Background color of the toast
  stopOnFocus: true // Optional - Stop hiding the toast when the user clicks or focuses the toast
}).showToast();

You can also use pre-defined functions for different types of toasts:

Toastify.success("Operation completed successfully!");
Toastify.error("An error occurred. Please try again later.");
Toastify.warning("Are you sure you want to do this?");
Toastify.info("A new update is available.");

Customization

Toastify can be easily customized using CSS. You can modify the default styles by overriding the .toastify class and its children. For example:

.toastify {
  font-size: 16px;
  color: #fff;
  background-color: #333;
  padding: 10px;
}

.toastify-icon {
  font-size: 24px;
}

.toastify-close {
  color: #fff;
}

You can also customize the animation and position of the toast by modifying the transition and top properties of the .toastify and .toastify-wrapper classes:

.toastify {
  position: fixed;
  right: 0;
  top: -100%;
  transition: top 0.5s ease-in-out;
}

.toastify-wrapper {
  position: absolute;
  top: 100px;
  right: 20px;
  width: 300px;
}

Conclusion

Toastify is a simple yet powerful library for displaying toast notifications in JavaScript applications. Its flexibility and customizability make it a great choice for any project.