@brenoroosevelt/toast

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

Attribute	Type	Default	Values / Description
type	string	default	default, system, error, info, warning, success
title	string	undefined	notification title
position	string	top	top, bottom
align	string	end	start, center, end
bgColor	string	#333	css background-color
color	string	#fff	css text color
duration	number	10000	time in ms, 0 to disable
closeBtn	boolean	true	show close button
zIndex	number	99999	css z-index
dismissible	boolean	true	dismiss on click
shadow	boolean	true	display shadow
animateIn	number	200	animation time in ms; 0 to disable
animateOut	number	150	animation time in ms; 0 to disable
append	boolean	true	notifications will be added to the bottom/top of the list; (append=true: bottom), (append=false: top)
maxWidth	number	600	max width in px
actions	[{ text: string, value: any, bgColor?: string, color?: string }]	[]	button actions

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.