https://github.com/brenoroosevelt/toast-js
Toast-js is an easy-to-use, dependency-free and Promise-based Javascript library for system notifications.
https://github.com/brenoroosevelt/toast-js
alert notification notify popup snack-bar toast
Last synced: about 1 year ago
JSON representation
Toast-js is an easy-to-use, dependency-free and Promise-based Javascript library for system notifications.
- Host: GitHub
- URL: https://github.com/brenoroosevelt/toast-js
- Owner: brenoroosevelt
- License: mit
- Created: 2022-06-16T22:11:29.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-04T11:47:41.000Z (almost 4 years ago)
- Last Synced: 2025-04-08T22:23:25.719Z (about 1 year ago)
- Topics: alert, notification, notify, popup, snack-bar, toast
- Language: TypeScript
- Homepage: https://brenoroosevelt.github.io/toast-js
- Size: 273 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Toast-js
Toast-js is an easy-to-use, dependency-free and Promise-based Javascript library for system notifications.
#### ==>> [Live Demo](https://brenoroosevelt.github.io/toast-js) <===
## Installation
```bash
npm i @brenoroosevelt/toast
```
## Usage
```js
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 |
```js
import toast from '@brenoroosevelt/toast'
toast.types.default.dismissible = false
toast.types.default.maxWidth = 300
toast.create("Hello notification") // type: default
```
## Custom Types
```js
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
```js
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
```css
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.