toast-notification-js

Toast Notification 🍞

A simple notification with better customization.

Demo / Example

You can click here to see the demo

Installation

You can install it via NPM

npm i toast-notification-js

or you can include it on you page via CDN

on head tag:

<link
    rel="stylesheet"
    href="https://unpkg.com/toast-notification-js/dist/toast-notification.min.css"
/>

on body tag:

<script src="https://unpkg.com/toast-notification-js/dist/toast-notification.min.js"></script>

⏩ Quick Start:

document.addEventListener("DOMContentLoaded", () => {
    var toastNotification = ToastNotification();

    toastNotification.create();

    // or

    toastNotification.create({
        classList: "your-favorite-custom-color",
        icon: "🍞",
        duration: "10",
        position: {
            y: "top",
        },
        // and other options...
    });
});

As module:

import "toast-notification-js/src/toast-notification.css";
import { ToastNotification } from "toast-notification-js";

ToastNotification.create({
    classList: "your-favorite-custom-color",
    icon: "🍞",
    duration: "10",
    position: {
        y: "top",
    },
    // and other options...
});

⚙ Options

Name	Type	Description	Default Value
classList	String	Your background color classes for the toast element, or red background if none are specified.	null
title	String	The title to display on the toast element, or null if none is specified.	null
message	String	The message to display on the toast element. If none is specified, the default value will be used.	"This is Toast message!"
icon	String	The icon to display on the toast element, or null if none is specified. You can input HTML String in this option.	null
duration	Number	The amount of time in seconds that the toast will be displayed. If duration is less than or equal to 0, the toast will permanently displayed. If duration is not initialized then default value will be used.	5 seconds
closeButton	Boolean	Whether to display a close button on the toast element.	true
position.x	String	The horizontal position of the toast element on the screen. Can be "left", "center", or "right". If position.x is not specified, the default value will be used.	"right"
position.y	String	The vertical position of the toast element on the screen. Can be "top", or "bottom". If position.y is not specified, the default value will be used.	"bottom"
position.z	Number	The z-index of the toast element. If position.z is not specified, the default value will be used.	50
redirect	String or Object	You can pass url string here or you can pass object with key url and newWindow. if the value is url string, the link will automatically open the url in new window.	null
redirect.url	String	The URL to redirect to when the toast element is clicked.	null
redirect.newWindow	String	Whether to open the redirect URL in a new window or in the current one.	true
progressBar	Boolean or Object	You can pass false or 0 value to disable progress bar. or you can pass object with key show and classList.	true
progressBar.show	Boolean	Whether to display a progress bar on the toast element.	true
progressBar.classList	String	Your background color classes for the progress bar color, or currentColor if none is specified.	null
root	HTMLElement	Display notification inside this element	document.body