theshtify v1.0.3

Thesharsol notifyer is a lightweight, vanilla JS toast notification library.it is completely customisable, allowing you to adapt the graphics window perfectly to the design of your project

Installation

npm i theshtify

CDN

<script src="https://cdn.jsdelivr.net/npm/theshtify/lib/theshtifyCDN.js"> </script>
<link rel="styleSheet" href="https://cdn.jsdelivr.net/npm/theshtify@1.0.1/css/theshtify.css"/>

ESModule

import { theshtify } from "theshtify/lib/theshtify";
import "theshtify/css/theshtify.css";

Features

• Easy use
• Multiple stacked notifications
• Customizable
• No blocking of execution thread

Customization options

• Notification Text
• Duration
• Background color
• Close icon display
• Display position
• font
• progress
• border radius

• borders

Presentation

The theshtify function takes as a parameter an object describing your notifications. the various options are available in the descriptions shown below.

Options

Basic example

theshtify({message: 'welcome to theshtify',type:'success'});

Configuration options

the configuration options allow you to fully adapt theshtify to the context of your application. the different options are described below

Example with type "custom"

Using the “custom” type you can (as described in the table above) describe custom colors for different parts of your notification.

theshtify(
    {
        message: 'welcome to theshtify',
        type: 'custom',
        config:{
            colors: {
                bg: '#0C7059',/** notification background */
                color: '#E0BC29',/** text-color*/
                border: {
                    type: 'solid',/** border-type support all css types */
                    color: 'gray'/**the border color */
                },
                progress: {
                    bg: '#E0BC29'/** the progress bar color */
                }
            }            
        }

    }
);

If you use the “custom” type without describing the colors as in the example, or omit certain parameters, theshtify will use the default values configured for the type

Colors configuration example

By default theshtify provides 4 types of notifications success, infos, danger and warning with corresponding colors. it may be that in the context of your project you want to redefine these colors, to do this simply redefine the description of the type in the “customColors”.

theshtify(
    {
        message: 'welcome to theshtify',
        type: 'success',
        config: {
            custom_colors: {
                success: {
                    bg: '#0C7059',
                    color: '#E0BC29',
                    border: {
                        type: 'solid',
                        color: 'gray'
                    },
                    progress: {
                        bg: '#E0BC29'
                    }
                },
            },
        }

    }
)

In the previous example, theshtify will use the configurations you specified for the “success” type. naturally, the other types will use theshtify's default colors, since we only specified custom configurations for the “success” type.

Full example

let config = {
    x_align: 'right',
    y_align: 'top',
    duration: 5000,
    font: {
        size: 15,
        weight: 900,
        family: 'arlon'
    },
    custom_colors: {
        success: {
            bg: '#0C7059',
            color: '#E0BC29',
            border: {
                type: 'solid',
                color: 'gray'
            },
            progress: {
                bg: '#E0BC29'
            }
        },
        /** you can also add other types configs */
    },
    radius: 20,
    bordered: true,
    border_width: 1,
    closer: true,
    progress: true,
    progress_height: 2

}
theshtify({ message: 'welcome to theshtify', type: 'success', config: config });

if you're working with modules, you can define the configuration in a separate file and import it at runtime

Errors

in the event of an error, theshtify will generate an error visible in your browser's console