Convenient Toast Notification Library (TypeScript) – vavt-message

Category: Javascript , Notification | June 4, 2024
Views Total:39 views
Official Page:Go to website
Last Update:June 4, 2024


Convenient Toast Notification Library (TypeScript) – vavt-message


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 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 =;
const warning = message.warning(msg);
const success = message.success(msg);
const error = message.error(msg);

4. Close a toast message manually using:


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

const info =, {
  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,

You Might Be Interested In:

Leave a Reply