Air-Toast

This is a lightweight, customizable toast notification package using TypeScript and TailwindCSS for styling. It allows for various types of notifications, including success, error, warning, and info, and offers features like customizable positioning, progress bars, and maximum visible toasts.

Features

• Multiple types of toasts: info, success, warning, error, and custom types
• Configurable duration, progress bars, and close callbacks
• Support for different positions: top-right, top-left, bottom-right, bottom-left
• Limit maximum visible toasts on the screen
• TailwindCSS-based styling for easy customization
• Highly customizable with custom types and classes

Installation

You can install the package via npm or yarn:

npm install air-toast

yarn add air-toast

Usage

1. To display a toast, you can use the global toast object. You can customize the toast by passing options such as message, duration, type, position, and more.

Here’s an example of how to show a toast:

import { toast } from 'air-toast';

toast.show({
    message: 'Hello, this is an info toast!',
    type: 'info',
    duration: 3000,
    position: 'top-right',
});

2. Configuration Options

The show method accepts the following options:

• message (required): The message to be displayed. This can be a string or an HTMLElement.
• duration (optional): Duration in milliseconds before the toast disappears. Defaults to 3000 ms.
• type (optional): The type of the toast. Can be one of info, success, warning, error, or any custom string type. Defaults to info.
• position (optional): Position of the toast on the screen. Can be one of top-right, top-left, bottom-right, or bottom-left. Defaults to top-right.
• showProgress (optional): Boolean to enable or disable a progress bar. Defaults to false.
• onClose (optional): Callback function that gets called when the toast is closed.
• customClass (optional): Add custom classes to the toast element.

4. Advanced Configuration

You can also configure the toast system with global settings using the setConfig method.

toast.setConfig({
    maxVisible: 5,  // Maximum number of visible toasts at a time
    defaultOptions: {
        duration: 4000,
        position: 'bottom-left',
    },
    customTypes: {
        myCustomType: 'Custom message class',
    }
});

5. Clear All Toasts

To clear all toasts from the screen, call:

toast.clearAll();

Example

Here’s a more complex example with a success toast, a progress bar, and a custom callback:

toast.show({
    message: 'Success! Your action was completed.',
    type: 'success',
    duration: 5000,
    position: 'bottom-right',
    showProgress: true,
    onClose: () => {
        console.log('Toast closed');
    },
});

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT