Convenient Toast Notification Library (TypeScript) – vavt-message

Preview:

Description:

vavt-message is a toast notification component that can be used to display transient notifications to users in your web app without disrupting the user experience.

Written in TypeScript, it includes support for various message types such as information, warnings, success, and errors.

How to use it:

1. Install vavt-message using Yarn or NPM:

# Yarn
$ yarn add @vavt/message
# NPM
$ npm install @vavt/message

2. Import the message component into your project:

import { message } from '@vavt/message';

3. You can then create different types of toast messages using the following methods:

const info = message.info(msg);
const warning = message.warning(msg);
const success = message.success(msg);
const error = message.error(msg);

4. Close a toast message manually using:

info();

5. Customize the appearance and behavior of your toast messages:

const info = message.info(msg, {
  class: '',
  single: false, // allows multiple toast messages
  offsetTop: 20,
  duration: 3000,
  closeable: false,
  zIndex: 9999,
});

6. Or set default configurations for all toast messages:

message.config( {
  class: '',
  single: false,
  offsetTop: 20,
  duration: 3000,
  closeable: false,
  darkSelector: ':root[data-theme=dark]', // styles for dark mode
  zIndex: 9999,
});