# @brenoroosevelt/toast

> ![toast notification image](toast-js.png) ## Installation ```bash npm i @brenoroosevelt/toast ```

Latest version **2.0.3** (published 2022-07-01) · 0 weekly downloads

## Install

```sh
npm install @brenoroosevelt/toast
pnpm add @brenoroosevelt/toast
yarn add @brenoroosevelt/toast
bun add @brenoroosevelt/toast
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2022-07-01 |
| First published | 2022-06-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brenoroosevelt |
| Keywords | snack bar, notification, toast, notify, popup, alert |

## Links

- npm: https://www.npmjs.com/package/@brenoroosevelt/toast
- npm.io page: https://npm.io/package/@brenoroosevelt/toast

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2022-07-01
- 2.0.0 — 2022-06-21
- 1.0.3 — 2022-06-20
- 1.0.2 — 2022-06-20

## README

# Toast-js
![toast notification image](toast-js.png)
## 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     | [{<br/>text: string, <br/>value: any, <br/>bgColor?: string, <br/>color?: string<br/>}] | []        | 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.

---
_Source: https://npm.io/package/@brenoroosevelt/toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._