Toaster UI Library Documentation

Toaster UI is a lightweight JavaScript library for displaying toast notifications on web pages. It provides a simple and customizable way to show temporary messages or notifications to users. This documentation will guide you through the installation process, usage examples, and customization options of the library.

Table of Contents

• Installation
• Usage
• Customization
• Examples

Installation

To use Toaster UI in your project, you have multiple options:

1. Script Tag: You can include the Toaster UI library directly in your HTML file using a script tag.

<script src="https://unpkg.com/[email protected]/dist/main.js"></script>

2. CDN: Alternatively, you can use a CDN link in your HTML file.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"></script>

3. npm: If you prefer using npm, you can install Toaster UI as a dependency in your project.

npm install toaster-ui

Usage

After installing Toaster UI, you can import the library in your JavaScript code and start using it.

import Toaster from "toaster-ui";

// Create a new instance of Toaster
const toaster = new Toaster.ToastManager();

// Show a toast notification
toaster.addToast("Hello, world!");

In the above example, we import the Toaster UI library and create a new instance of it. Then, we use the addToast method to display a toast notification with the content "Hello, world!" and the type "success".

Customization

Changing Toast TYpe

You can specify the type (string), there are four (4) avaiable options

• success
• error
• warning
• info

// Set a custom duration of 5 seconds (5000 milliseconds)
toastManager.addToast("This is an error toast", "default");

Toaster UI provides several customization options for toast notifications. Here are some examples:

toastManager.addToast("This is a warning toast", "warning", {options});

| OPTIONS | VALUE | DEFAULT | | -------- | -------- | ------- | | duration | number | 3000 | | onClose | function | null | | styles | object | null |

Changing Toast Duration

You can specify the duration (in milliseconds) for how long the toast should be displayed .

// Set a custom duration of 5 seconds (5000 milliseconds)
toastManager.addToast("This is an error toast", "error", { duration: 5000 });

Applying Custom Styles

You can apply custom CSS styles to the toast element. Pass an object with CSS property-value pairs as an argument inside the options objects.

• The custom style will overide the type of the toast

// Apply custom styles to the toast element
toastManager.addToast("This is an error toast", "error", {
  duration: 5000,
  styles: {
    backgroundColor: "teal",
    color: "#ffffff",
  },
});

Adding Custom Callback on Close

You can provide a custom callback function that will be executed when the toast is closed using the onClose option.

// Define a custom callback function
const onCloseCallback = () => {
  console.log("Toast closed!");
};

// Create a toast with custom onClose callback
toastManager.addToast("This is a warning toast", "warning", {
  onClose: onCloseCallback,
});

Additional Resources

For more information and examples, you can refer to the Toaster UI GitHub repository.

Please note that the provided code snippets and examples are simplified for demonstration purposes. Make sure to adapt the code to your specific project requirements.

Feel free to explore the Toaster UI library and leverage its features to enhance the user experience on your web pages.

Examples

Here are some usage examples to demonstrate different scenarios:

Example 1: Simple Toast

toastManager.addToast("This is a simple toast message", "info");

Example 2: Custom Duration and Callback

const onCloseCallback = () => {
  console.log("Toast closed!");
};

toastManager.addToast("Custom duration and callback", "success", {
  duration: 5000,
  onClose: onCloseCallback,
});

Example 3: Multiple Toasts

toastManager.addToast("First toast", "info");
toastManager.addToast("Second toast", "warning");

setTimeout(() => {
  toastManager.addToast("This is a warning toast", "default", {
    onClose: handleToastClose,
  });
}, 2000);