BuzzNotify
Small and Clean JavaScript Toast Notifications
New version introduces breaking changes!
Now the styles come separately and you will have to use a new import: ```js // >= 1.6.0 import { Notify } from '@reliutg/buzz-notify' import '@reliutg/buzz-notify/dist/buzz-notify.css' ``` Now the data-attribute is used to define the notification container: ```html // <-- Before 2.5.0 // <-- After 2.5.0 ```Features
✨ Beautiful and easy to use 😊 Lightweight ❤️ Strongly typedDemo
https://buzz-notify-docs.vercel.appInstall
```bash npm install @reliutg/buzz-notify ```CDN
```html ```ES6 Modules
```js import { Notify } from '@reliutg/buzz-notify' import '@reliutg/buzz-notify/dist/buzz-notify.css' ``` orSkypack no npm install needed!
```html ```How to use
Inindex.html:
```html
```
Define global options for all notifications.
```html
index.js:
```javascript
Notify({ title: 'My notification' })
```
Change the default notification type
```javascript
Notify({ title: 'My notification', type: 'danger' })
```
Determine the timeout in milliseconds. Default: 3000ms. If the duration is a negative number, the notification will not be removed.
```javascript
Notify({ title: 'My notification', duration: 5000 })
```
Using asynchronously
```javascript
import { NotifyAsync } from 'https://cdn.skypack.dev/@reliutg/buzz-notify'
NotifyAsync({ title: 'My notification' }).then(() => {
console.log('Notification closed')
})
```
Listen to the close event
```javascript
const n1 = Notify({ title: 'My notification' })
n1.addEventListener('notifyclose', () => {
console.log('Notification closed')
})
```
Change the position of the toast message. Can be ‘top-left’, ‘top-right’, ‘top-center’, ‘bottom-left’, ‘bottom-center’, or ‘bottom-right’. Default: ‘top-right’.
```javascript
Notify({ title: 'My notification', position: 'bottom-center' })
```
Execute a callback function when the toast message is dismissed.
```javascript
Notify({ title: 'My notification' }, () => {
console.log('Notification closed')
})
```
Usage with Vue
Try live demoUsage with React
Try live demoCustomization
Customize the styles
```css :root { --bzn-trans-cubic-bezier: cubic-bezier(0.215, 0.61, 0.455, 1); --bzn-trans-duration: 0.4s; --bzn-color-success: #155724; --bzn-background-color-success: #d4edda; --bzn-border-color-success: #c3e6cb; --bzn-color-danger: #721c24; --bzn-background-color-danger: #f8d7da; --bzn-border-color-danger: #f5c6cb; --bzn-color-warning: #856404; --bzn-background-color-warning: #fff3cd; --bzn-border-color-warning: #ffeeba; } ```Customize icons
```js // You can change all or just one type of icon // inline svg and emojis are supported :) const myIcons = { success: '🎉', danger: '💣', warning: '⚠️', } Notify({ title: 'My notification', type: 'success', config: { icons: myIcons } }) ```Options
```javascript Notify({ /* Title of the notification*/* Sets the HTML markup contained within the notification.*/* Sets the type of the notification.* @defaultvalue "success"*/* Sets the position of the notification.* @defaultvalue "top-right"*/* Auto close notification. Set in ms (milliseconds). If the duration is a negative number, the notification will not be removed.* @defaultvalue 3000*/* Sets the transition effect.* @defaultvalue "fade"*/* Sets the configuration of the notification.*//*** Override the default icons.*/icons: Icons;