Lightweight & Versatile Toast Notification JS Library – Crispy-Notify

Category: Javascript , Notification | April 4, 2023
Author:vijays-hub
Views Total:590 views
Official Page:Go to website
Last Update:April 4, 2023
License:MIT

Preview:

Lightweight & Versatile Toast Notification JS Library – Crispy-Notify

Description:

Crispy-Notify is a lightweight yet full-featured notification library for creating beautiful and customizable toast messages to inform users of important messages, alerts, and updates in your web app.

Inspired by fkhadra’s react-toastify notification component.

Features:

  • Auto close after a timeout.
  • Dark mode.
  • Custom positions.
  • Plays a sound when a toast is activated.
  • With or without progress bars.
  • 5 notification types: info, warning, success, error.
  • And more.

How to use it:

1. Download and import the Crispy-Notify as a module.

<!-- Required Stylesheet -->
<link rel="stylesheet" href="styles/toast.css" />
<script type="module">
  import Toast from "./Toast.js";
</script>

2. Display a default toast message on the screen.

new Toast({
    toastContent: {
      message: "Toast Message",
      title: "Toast Title",
    },
});

3. Change the notification type:

  • info
  • warning
  • success
  • error
new Toast({
    toastContent: {
      message: "Toast Message",
      title: "Toast Title",
      type: "warning",
    },
});

4. Position the toast messages:

  • top-center
  • top-left
  • top-right (default)
  • bottom-center
  • bottom-left
  • bottom-right
new Toast({
    toastContent: {
      message: "Toast Message",
      title: "Toast Title",
      type: "warning",
    },
    position: "top-left",
});

5. More configurations to customize the toast messages.

new Toast({
    // auto dismiss the toast message after this timeout
    autoClose: 5000, // in ms.
    // close the toast message on click
    canCloseOnClick: true,
    // enable dark mode
    darkMode: false,
    // callback function
    onClose: () => {},
    
    // pause the countdown timer based on...
    pauseOnHover: true,
    pauseOnFocusLoss: true,
    // play a sound effect
    playNotificationSound: false,
    // show progress bar
    showProgressBar: true,
    
});

Changelog:

04/04/2023

  • Added animated toast icons

You Might Be Interested In:


Leave a Reply