Simple Toast Notification & Loading Indicator JavaScript Library – popular-message.js

Preview:

Description:

popular-message.js is a JavaScript library that helps create toast-like info/success/warning/error notifications and loading indicators on your modern web apps.

With the popular-message library, you can easily create stylish feedback messages informing your users about the status of their actions. It also allows you to create loading indicators that can be used to notify the user when a request is being processed.

How to use it:

1. Install and import the popular-message.

# Yarn
$ yarn add popular-message
# NPM
$ npm i popular-message

import $message from 'popular-message';
import 'popular-message/index.css';

2. Or directly load the following files into your document.

<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>

3. Basic usages.

$message.info('This is an info message');
$message.success('This is a success message');
$message.warning('This is a warning message');
$message.error('This is an error message');
$message.loading('loading...');

4. Create custom toast messages and loading indicators

$message.info('This is an info message',{
  // auto dismiss after 2 seconds
  // 0 means always show the toast message
  duration: 2,
  // show a close button inside the toast message
  closable: false,
  // determine whether to allow html content
  dangerUseHtml: false,
  // callback
  onClose:() => console.log('close'),
  
});

5. Set global options.

$Message.config({
  // top offset in px
  top: 24,
  // auto dismiss after 3 seconds
  // 0 means always show the toast message
  duration: 3,
  // only display one toast message at a time
  singleton: false,
});

6. Destroy the instance.

$message.destroy()