@brenoroosevelt/toast v2.0.3

Toast-js

Installation

npm i @brenoroosevelt/toast

Usage

import toast from '@brenoroosevelt/toast'

toast.system ("Hi, i am a notification", /** options = {} */) 
toast.info   ("Hi, i am a notification", /** options = {} */)
toast.warning("Hi, i am a notification", /** options = {} */)
toast.error  ("Hi, i am a notification", /** options = {} */)
toast.success("Hi, i am a notification", /** options = {} */)
toast.create ("Hi, i am a notification", /** options = {} */)

Default Options

import toast from '@brenoroosevelt/toast'

toast.types.default.dismissible = false
toast.types.default.maxWidth = 300

toast.create("Hello notification")  // type: default

Custom Types

import toast from '@brenoroosevelt/toast'

// define new custom type
toast.types.setType('myType', {bgColor: "blue", position: "bottom", duration: 3000})
toast.create("Hello error", {type: "myType"})

// override a built-in type configurantion
toast.types.setType('error', {position: "top", align: "center"})
toast.error("Hello error")

Promise based

toast.info("hi, i m a notification").then((result) => console.log(result))
    
toast.create("Notification with actions", {
    position: "top",
    actions: [
        {text: "Yes", value: "ok"},
        {text: "No", value: "no"},
    ]
}).then((result) => {
    if (result.value === "ok") console.log("user says `yes`")
    if (result.value === "no") console.log("user says `no`")
    if (result.value === "click") console.log("user click to dismiss")
    if (result.value === "close-btn") console.log("user click close button")
    if (result.value === "timeout") console.log("notification has timed out")
})

CSS override

div.br-toast-container {
    margin: 50px;  /*your value*/
}

#toast-container-top-center { /* bottom|top, start|center|end */
    margin-top: 50px;  /*your value*/
}

div.br-toast-element {
    border-radius: 0;  /*your value*/
}

div.br-toast-close-btn {
    /*your value*/
}

p.br-toast-message {
    /*your value*/
}

p.br-toast-title {
    /*your value*/
}

button.br-toast-title {
    /*your value*/
}

License

This project is licensed under the terms of the MIT license.