Introducing CrispyToast: A Lightweight JavaScript Toast Library

2 min readAug 22, 2023

CrispyToast is a simple and lightweight JavaScript library that allows you to easily add attractive and customizable toast notifications to your web applications. Toast notifications are a great way to provide non-intrusive feedback to users about the outcome of their actions, such as success messages, warnings, errors, and more.

In this guide, we’ll walk you through the process of integrating and using the CrispyToast library in your projects.

Getting Started

Installation

To start using CrispyToast, you have two options for including the library in your project:

CDN

Add the following link & script tag to the <head> section of your HTML file:

<link rel="stylesheet" href="https://raheelize.github.io/CrispyToastJS/crispy-toast.css">
<script src="https://raheelize.github.io/CrispyToastJS/crispy-toast.js"></script>

Download

Alternatively, you can download the CrispyToast library from the GitHub repository and include the crispy-toast.css and crispy-toast.js file in your project manually.

Usage

To display a toast notification using CrispyToast, you simply need to call one of its functions:

CrispyToast.success("Task completed successfully");
CrispyToast.error("An error occurred while processing");
CrispyToast.warning("This action is irreversible");
CrispyToast.info("Did you know? Interesting fact here");

Customization

CrispyToast offers various customization options to tailor the look and behavior of the toasts to your needs.

You can also customize the appearance and behavior of the toasts by providing optional configuration options:

CrispyToast.success("Action completed", {
  position: "bottom-right", // Position of the toast (top-right, top-left, bottom-right, bottom-left)
  timeout: 5000,            // Duration the toast should be visible in milliseconds
});

Styling

You can easily change the appearance of the toasts by modifying the CSS classes in the crispy-toast.css file. You can adjust the background colors, font sizes, and more to match your application's design.

Conclusion

CrispyToast is a lightweight and user-friendly JavaScript library that simplifies the process of adding toast notifications to your web applications. Its easy integration and customization options make it an ideal choice for enhancing user experience.

To get started, check out the GitHub repository for the complete documentation and source code.

We hope you find CrispyToast useful for your projects! Happy coding!