# xdf-vue-toastify

> A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Latest version **1.0.1** (published 2022-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install xdf-vue-toastify
pnpm add xdf-vue-toastify
yarn add xdf-vue-toastify
bun add xdf-vue-toastify
```

## 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 | 1.0.1 |
| Published | 2022-07-01 |
| First published | 2022-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 76.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | zhaixiaowei |
| Keywords | vue, vue3, notification, toast, snackbar, message, xdf-vue-toastify |

## Links

- npm: https://www.npmjs.com/package/xdf-vue-toastify
- Repository: https://github.com/zxw94FE/xdf-vue-toastify
- Homepage: https://github.com/zxw94FE/xdf-vue-toastify#readme
- Issues: https://github.com/zxw94FE/xdf-vue-toastify/issues
- npm.io page: https://npm.io/package/xdf-vue-toastify

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

- 1.0.1 (latest) — 2022-07-01
- 1.0.0 — 2022-07-01

## README

# Xdf Vue Toastify

A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

English | [简体中文](./README-zh_CN.md)

![alt text](./gif/demo.gif "Logo Title Text 1")

## Talk is cheap, show me the demo

Try it out in the [playground](https://szboynono.github.io/mosha-vue-toastify/) in the documentation

## Features
- Super easy to setup! try follow [this](#the-gist)
- Swipe to close
- Support for Composition API
- Written in typescript, full typescript support
- Super light weight
- Define behavior per toast
- Fun progress bar to display remaining time
- A lot more coming!

## Installation

With NPM:

```bash
$ npm install xdf-vue-toastify
```

With Yarn:

```bash
$ yarn add xdf-vue-toastify
```

## The gist
```html
<template>
  <button @click="toast">Toast it!</button>
</template>
```
```ts
<script lang='ts'>
import { defineComponent } from 'vue'
// import the library
import { createToast } from 'xdf-vue-toastify';
// import the styling for the toast
import 'xdf-vue-toastify/dist/style.css'

export default defineComponent({
  name: 'HelloWorld',
  setup () {
    const toast = () => {
        createToast('Wow, easy')
    }
    return { toast }
  }
})
</script>
```

## Configuration

The `createToast` function accepts 2 arguments:

- **First argument**: 
  - It can be just a string or a object like this: `{ title: 'some title', description: 'some good description'}`. By the way, description now accepts html, for more customization, we recommand trying out the custom component approach
  - It can also accept a Vue 3 component or a VNode if you need more customization, e.g.
  ```ts
    // without props
    import { createToast } from 'xdf-vue-toastify';
    import CustomizedContent from "./CustomizedContent.vue";
    import 'xdf-vue-toastify/dist/style.css';

    export default defineComponent({
      setup () {
        const toast = () => {
            createToast(CustomizedContent)
        }
        return { toast }
      }
    })
  ```
  ```ts
    // with props
    import { createToast, withProps } from 'xdf-vue-toastify';
    import CustomizedContent from "./CustomizedContent.vue";
    import 'xdf-vue-toastify/dist/style.css';

    export default defineComponent({
      setup () {
        const toast = () => {
            createToast(withProps(CustomizedContent, { yourFavProp: 'bruh' }))
        }
        return { toast }
      }
    })
  ```

- **Second argument**: the second argument is an options object.

    | name        | type           | default  | description |
    | ------------- |:-------------:| -----:| -----:|
    | type      | 'info', 'danger', 'warning', 'success', 'default' | 'default' | Give the toast different styles and icons. |
    | timeout      | number      |   5000 | How many ms you want the toggle to close itself? Note: passing -1 to the timeout will stop the modal from closing.
    | position      | 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' |   'top-right' | Where do you want the toast to appear? |
    | showCloseButton | boolean      |    true | Do you wanna show the close button ? |
    | showIcon | boolean      |    false | Do you wanna show the icon ? |
    | transition | 'bounce', 'zoom', 'slide' | 'bounce' | Which animation do you want? |
    | hideProgressBar | boolean      |    false | Do we wanna hide the fancy progress bar? |
    | swipeClose | boolean      |    true | Allows the user swipe close the toast |
    | toastBackgroundColor | string      | default color | Customize the background color of the toast. |
    | onClose | function      | N/A | This function will be called at the end of the toast's lifecycle|

- **Programatically closing**
  The `createToast` function returns an object that contains a `close` funtion that allows the user to programatically dismiss the toast. See below:
  ```ts
      import { createToast } from 'xdf-vue-toastify';
      import CustomizedContent from "./CustomizedContent.vue";
      import 'xdf-vue-toastify/dist/style.css';

      export default defineComponent({
        setup () {
          const toast = () => {
              // This close function can be used to close the toast
              const { close } = createToast(CustomizedContent)
              // close()
          }

          return { toast }
        }
      })
  ```
  To clear all the toasts, use the `clearToasts` function. See below
  ```ts
      import { createToast, clearToasts } from 'xdf-vue-toastify';
      import CustomizedContent from "./CustomizedContent.vue";
      import 'xdf-vue-toastify/dist/style.css';

      export default defineComponent({
        setup () {
          const clear = () => {
            // clears all the toasts
            clearToasts()
          }

          return { clear }
        }
      })
  ```


## Support

Give this [project](https://github.com/zxw94FE/xdf-vue-toastify) a ⭐ if you like it. Any suggestions are welcome!

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