# dara-toast

> Dara Toast Message

Latest version **0.1.17** (published 2024-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install dara-toast
pnpm add dara-toast
yarn add dara-toast
bun add dara-toast
```

## Health

**Score 35/100 (D)** — status: abandoned.

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.17 |
| Published | 2024-03-17 |
| First published | 2023-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 111.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | darainfo |
| Maintainers | darainfo |
| Keywords | daraToast, toast, darainfo, message, notification, javascript |

## Links

- npm: https://www.npmjs.com/package/dara-toast
- Repository: https://github.com/darainfo/toast
- Issues: https://github.com/darainfo/toast/issues
- npm.io page: https://npm.io/package/dara-toast

## Dependencies (2)

- [esbuild](https://npm.io/package/esbuild.md) ^0.18.11
- [typescript](https://npm.io/package/typescript.md) ^5.1.6

## 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

- 0.1.17 (latest) — 2024-03-17
- 0.1.16 — 2024-03-15
- 0.1.15 — 2023-11-03
- 0.1.14 — 2023-10-31
- 0.1.13 — 2023-10-17
- 0.1.12 — 2023-10-13
- 0.1.11 — 2023-10-13
- 0.1.10 — 2023-09-20
- 0.1.9 — 2023-07-25
- 0.1.8 — 2023-07-06
- 0.1.7 — 2023-07-06
- 0.1.6 — 2023-07-04
- 0.1.5 — 2023-07-04
- 0.1.4 — 2023-07-04
- 0.1.3 — 2023-07-04
- … 12 more at https://npm.io/package/dara-toast/versions

## README

# Toast

Simple toast message

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/darainfo/dara-toast/blob/main/LICENSE)
[![npm version](https://badge.fury.io/js/dara-toast.svg)](https://img.shields.io/npm/v/dara-toast)
![npm](https://img.shields.io/npm/dt/dara-toast)
[![minzipped size](https://img.shields.io/bundlephobia/minzip/dara-toast)](https://bundlephobia.com/package/dara-toast)


## Browser Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)  
--- | --- | --- | --- | --- |  
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |  


# build
```
npm run build

```

# 사용방법
```
new Toast({ items: [{ text: '한글임 <br/>asdfwef' }],  style: 'success', duration: 3, position: { vertical: 'top', horizontal: 'left' } })
new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', '한글임한글임한글임ㄴㄴㄴㄴ'], style: 'primary', duration: 10, position: { vertical: 'top', horizontal: 'center' } })
var toastObj = new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], keepInstance: true, style: 'secondary', duration: 3, position: { vertical: 'top', horizontal: 'right' } })

new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'warning', duration: 10, position: { vertical: 'middle', horizontal: 'left' } })
new Toast({ items: [{ text: 'awseawefawefawefaweff <br/>asdfwef'}, 'test'], style: 'success', duration: 5, position: { vertical: 'middle', horizontal: 'center' } })
new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'info', duration: 10, position: { vertical: 'middle', horizontal: 'right' } })

new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'danger', duration: 10, position: { vertical: 'bottom', horizontal: 'left' } })
new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'success', duration: 10, position: { vertical: 'bottom', horizontal: 'center' } })
new Toast({ items: [{ text: 'awseawefawefawefaweff <br/>asdfwef', title: 'title', duration:3 }, '한글임한글임한글'], style: 'success', duration: 5000, position: { vertical: 'bottom', horizontal: 'right' } })

```
  

# toast 옵션
| key | 설명 | 기본값 | 옵션값 |
|-----|------|-----|-----|
| duration |  유지 시간(단위 초) |  3 |  |
| width |  넓이 |  '' |  |
| position |   위치 |   vertical: 'top' <br> horizontal: 'right'   |  top, middle, bottom <br>  left, center, right
| enableCloseButton |  닫기 버튼 활성화여부 |  true |  |
| style |  백그라운드 스타일 |  'success' | 'primary', 'secondary' , 'info' , 'success' , 'warning' , 'danger' |
| textColor |  글자 색 |  '#000000' | |
| enableProgress |  프로그래스 바 사용여부 |  true |  |
| keepInstance |  show 가 끝나도 toast 객체를 유지 <br> toast 객체 하나 생성해서 계속 사용할 경우 사용 |  false | 
  


# toast item 옵션
| key | 설명 | 기본값 | 옵션값 |
|-----|------|-----|-----|
| title |  제목 |  '' |  |
| enableCloseButton |  닫기 버튼 활성화여부 |  true |  |
| style |  백그라운드 스타일 |  'success' | 'primary', 'secondary' , 'info' , 'success' , 'warning' , 'danger' |
| textColor |  글자 색 |  '#000000' | |
| enableProgress |  프로그래스 바 사용여부 |  true | |

```

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