Introduction

⭐️# Adding toastmaker to npm project
   # To install toastmaker library in your npm project, execute use the following commands
   npm install --save toastmaker

   # or if you use yarn
   yarn add toastmaker -S

   # Then import the ToastMaker in your script as shown below.
   import ToastMaker from 'toastmaker';
   import "toastmaker/dist/toastmaker.css";

⭐️# Adding toastmaker in plain html/javascript
   # Copy below script and css to the head section of your index.html file
                   <link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">
   <script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
                

Toast Maker is a simple and very lightweight javascript library for showing toast notification messages on web page. It provides multiple configurations to customize the toast styling(font, background, size ... anything), duration, position etc. Below are the option you can use with ToastMaker function

Simple Toast

ToastMaker('Hi There!');
                

You can create a simple toast just by passing the text message to ToastMaker function. Toast will be shown in bottom center for 3 seconds(default) 👉
Say Hi

Toast With Timeout

ToastMaker('Hi There!', 5000);
                

You can specify the timeout to ToastMaker function. Toast will be shown for 5 seconds with this code 👉
Say Hi for 5 Seconds

Toast With Alignment

ToastMaker("Hi There, I'm at the top left of the screen!", 5000, {
    valign: 'top',
    align: 'left'
});
                

You can specify the alignment arguments as well to position the toast wherever you want.

In this example, Toast will be shown in top left side of the screen 👉
Show in Top Left

Toast With Styles

ToastMaker('All Records Deleted!', 3500, {
    styles : {
        backgroundColor: 'red',
        fontSize: '20px'
    }
});
                

You can specify your own style attributes to the toast element, for example you can apply background color, font size, border... etc styling with the use of styles option.

With this example, Toast will be shown for 3.5 seconds with red background and font size 20px 👉
Delete Notification

Toast With classList

.custom-border {
    border: 1px solid #ffffff;
    border-radius: 0;
}

.large-appearance {
    top: 0;
    background-color: #a6e22ec2;
    color: #323f4c;
    font-size: 22px;
    max-width: initial;
    width: 100%;
    padding: 15px;
}
                    
                    
ToastMaker("I'm a bit different than others... 😎", 2000, {
    valign: 'top'
    classList: ["custom-border", "large-appearance"]
});
                

If you want to modify the toast element styling without specifying all the style attributes each time, you can create one or more css classes and pass it to the ToastMaker with classList option.

With this example, a green colored, full width transparent Toast will be shown for 2 seconds at the top.

This toast is created by applying custom css classes as shown here 👉
Big Toast

Download

                    
ToastMaker('Made with ❤️ by vivekweb2013');
                    
                

You can download the latest version of toastmaker distributable bundle from the github releases section.
Download Latest Release
Who made it?

If you like this library, please start it on Github - ToastMaker