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:
// >= 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:
<div id="notify"></div> // <-- Before 2.5.0
<div data-notify></div> // <-- After 2.5.0
Features
Demo
https://buzz-notify-docs.vercel.app
Install
npm install @reliutg/buzz-notify
CDN
<link rel="stylesheet" href="https://unpkg.com/@reliutg/buzz-notify/dist/buzz-notify.css" />
<script src="https://unpkg.com/@reliutg/buzz-notify"></script>
ES6 Modules
import { Notify } from '@reliutg/buzz-notify'
import '@reliutg/buzz-notify/dist/buzz-notify.css'
or
Skypack no npm install needed!
<script type="module">
import { Notify } from 'https://cdn.skypack.dev/@reliutg/buzz-notify'
import 'https://cdn.skypack.dev/@reliutg/buzz-notify/dist/buzz-notify.css'
</script>
How to use
In index.html:
<div data-notify></div>
Define global options for all notifications.
<div
data-notify
data-notify-type="warning"
data-notify-position="bottom-center"
data-notify-transition="bounce"
data-notify-duration="2000">
</div>
In index.js:
Notify({ title: 'My notification' })
Change the default notification type
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.
Notify({ title: 'My notification', duration: 5000 })
Using asynchronously
import { NotifyAsync } from 'https://cdn.skypack.dev/@reliutg/buzz-notify'
NotifyAsync({ title: 'My notification' }).then(() => {
console.log('Notification closed')
})
Listen to the close event
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’.
Notify({ title: 'My notification', position: 'bottom-center' })
Execute a callback function when the toast message is dismissed.
Notify({ title: 'My notification' }, () => {
console.log('Notification closed')
})
Usage with Vue
Usage with React
Customization
Customize the styles
: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
// 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
Notify({
/**
* Title of the notification
*/
title: string;
/**
* Sets the HTML markup contained within the notification.
*/
html?: string;
/**
* Sets the type of the notification.
* @defaultvalue "success"
*/
type?: Type;
/**
* Sets the position of the notification.
* @defaultvalue "top-right"
*/
position?: Position;
/**
* Auto close notification. Set in ms (milliseconds). If the duration is a negative number, the notification will not be removed.
* @defaultvalue 3000
*/
duration?: number;
/**
* Sets the transition effect.
* @defaultvalue "fade"
*/
transition?: Transition;
/**
* Sets the configuration of the notification.
*/
config?: {
/**
* Override the default icons.
*/
icons: Icons;
} | null;
});
Based on
https://github.com/euvl/vue-notification
Contributors
✨
Thanks goes to these wonderful people (emoji key):
 krau5 |
This project follows the all-contributors specification. Contributions of any kind welcome!
6 Jul 9, 2022
4 Mar 12, 2021
10 Jan 8, 2023
277 Dec 12, 2022
4 Jan 18, 2022
3 Feb 23, 2022
43 Jan 5, 2023
1 Jun 30, 2022
4 Jul 26, 2022
7 Aug 16, 2022
7 Jul 31, 2022
27 Dec 28, 2022
2k Jan 2, 2023
5 Sep 11, 2022
8 Aug 15, 2022
7 Feb 13, 2022
8 Jun 20, 2022
9 Dec 17, 2022
253 Dec 28, 2022