Nonagons Please Me

    web-in-app-notification

    1.0.0 • Public • Published

    web-in-app-notification

    A javascript Library for to create awesome Notifications

    Features

    • Create in App Notification
    • Many useful opions
    • Embed interactive contents

    Screenshot

    screenshot

    Install

    script

    <script src="path/to/dist/index.min.js"></script> <script src="https://unpkg.com/web-in-app-notification/dist/index.min.js"><script>

    CSS

    <link rel="stylesheet" href="path/to/dist/style.css"> <link rel="stylesheet" href="https://unpkg.com/web-in-app-notification/dist/style.css">

    How to use

    create new notification

        const myNotification = new inAppNotification({options});

    options

    All properties can be omitted.

    If these properties are omitted, the default values will be applied.

    {
        time: number, //default:5000
        type: "top" | "bottom-right" | "top-right", //default:bottom-right
        title: string, //default:""
        description: string, //default:""
        attachment: inAppNotificationImage, //default:null
        interactions: {
            buttons:inAppNotificationButton[], //default:null
            form:inAppNotificationInput //default:null
        },
        thumbnail: inAppNotificationImage, //default:null
        header: string, //defalut:""
        footer: string, //default:""
        controls: "visible" | "x" | "menu" | "hidden", //default:"visible"
        onclick: Function, //default:null
        appendTo: HTMLElement, //default:document.body
        sound: HTMLAudioElement | string, //default:null
        menus: inAppNotificationMenuOption[] //default:null
    }
    • time : Displayed duration(ms)
    • type : Display position
    • title : Title text (bold)
    • description : Description of notification
    • attachment : Image attachment
    • interactions : Embed an interative contents
    • thumbnail : Small image in header
    • header : Header text (small and gray)
    • footer : Footer text (small and gray)
    • onclick : The action to be performed when clicked
    • appendTo : Parent Element of the Notification
    • sound : Play a sound
    • menus : Advanced options

    inAppNotificationImage

    Embed an image in the notification.

    {
        src: string,
        alt: string
    }
    • src : Image URL.
    • alt : Alternative text (can be omitted)

    inAppNotificatonButton

    {
        text: string,
        onclick: Function,
        clickToHide:boolean
    }
    • text : Button text
    • onclick : The action to be performed when clicked
    • clickToHide : If true, the notification disappear when clicked (can be omitted)

    inAppNotificationInput

    {
        placeholder: string,
        onsubmit: Function,
        submitToHide:boolean
    }
    • placeholder : placeholder text (can be omitted)
    • onclick : The action to be performed when submit
    • clickToHide : If true, the notification disappear when clicked (can be omitted)

    inAppNotificationMenuOption

    {
        text: string,
        onclick: Function
    }
    • text : Button text
    • onclick : The action to be performed when clicked

    Advanced Options menu

    click three dots

    Advanced options

    Install

    npm i web-in-app-notification

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    172 kB

    Total Files

    12

    Last publish

    Collaborators

    • mksk