web-in-app-notification v1.0.0

web-in-app-notification

A javascript Library for to create awesome Notifications

Features

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

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