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

✨ Beautiful and easy to use 😊 Lightweight ❤️ Strongly typed

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

Try live demo

Usage with React

Try live demo

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):

This project follows the all-contributors specification. Contributions of any kind welcome!