Lightweight Beautiful Notification Component – wc-toast

wc-toast is a lightweight, beautiful, accessible, and framework-agnostic notification component written in JavaScript.

It is compatible with React, Vue, Svelte, and Vanilla JavaScript, making it a versatile essential tool for web developers who want to add Android-style toast notifications to their web apps. Whether you want to display error messages, loading indicators, or any other type of notification, WC-Toast.js has you covered.

How to use it:

1. Install and import the wc-toast component.

# NPM
$ npm i react-native-svg wc-toast

import { toast } from 'wc-toast'
// OR From a CDN
import { toast } from 'https://cdn.skypack.dev/wc-toast';

2. Add the <wc-toast> component to the page.

<wc-toast></wc-toast>

3. Show a default notification on the page.

toast('This is a notification!');

4. Alias.

// Error message
toast.error('Authentication failed');
// Success message
toast.success('Authentication success');
// Loading message
toast.loading('Authenticating...', {
  duration: 4000 
});
// Promise example
toast.promise(
  new Promise((resolve, reject) => {
    setTimeout(() => {
      if ((Math.random(10) * 10) % 2 === 0) {
        resolve('foo');
      } else {
        reject('bar');
      }
    }, 2500);
  }),
  {
    loading: 'Authenticating...',
    success: 'Authentication success!',
    error: 'Authentication failed!',
  }
);

5. Available options to config the notification.

toast(
  // notification message
  message: string,
  // options
  options: {
    icon: {
      type: 'success' | 'loading' | 'error' | 'custom' | 'svg';
      content: string;
   };
  // auto dismiss after 4000ms
  duration: number | 4000;
  // theme options
  theme: {
    type: 'light' | 'dark' | 'custom';
    style: {
       background: string;
       color: string;
       stroke: string;
    };
  };
  
})

Changelog:

v1.3.1 (02/01/2024)

• bugfix

v1.2.11 (06/03/2023)

• theme: use specified theme