Skip to content

danie-ramdhani/toast-notification

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Toast Notification 🍞

NPM Release Latest Release

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
marginWidth String Add margin x axis null
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