@dotwake/message-toast

�� A beautiful, lightweight toast message component for Vue, React, and Vanilla JavaScript projects.

✨ Features

• 🎨 Beautiful gradient design with backdrop blur effect
• 📦 Zero dependencies
• 🎯 Full TypeScript support
• 💻 Works with Vue, React, Angular, or vanilla JS
• 📱 Responsive and mobile-friendly
• 👆 Click to dismiss manually
• ⚡ Auto-dismiss with configurable duration
• 🔄 Multiple messages stack automatically

📦 Installation

npm install @dotwake/message-toast
# or
yarn add @dotwake/message-toast
# or
pnpm add @dotwake/message-toast

🚀 Quick Start

import { MessageAlert } from '@dotwake/message-toast';

// Success message
MessageAlert.success('Operation successful!');

// Error message
MessageAlert.error('Something went wrong!');

// Warning message
MessageAlert.warning('Please note!');

// Custom duration (5 seconds)
MessageAlert.success('Processing...', 5000);

// With callback
MessageAlert.success('Saved!', 3000, () => {
  console.log('Message closed');
});

// Clear all messages
MessageAlert.clear();

📖 API

Methods

MessageAlert.success(message, duration?, onClose?)

Display a success message.

Parameters:

• message (string): The message content
• duration (number, optional): Display duration in milliseconds (default: 3000)
• onClose (function, optional): Callback function when message closes

MessageAlert.error(message, duration?, onClose?)

Display an error message.

Parameters:

• message (string): The message content
• duration (number, optional): Display duration in milliseconds (default: 3000)
• onClose (function, optional): Callback function when message closes

MessageAlert.warning(message, duration?, onClose?)

Display a warning message.

Parameters:

• message (string): The message content
• duration (number, optional): Display duration in milliseconds (default: 3000)
• onClose (function, optional): Callback function when message closes

MessageAlert.clear()

Clear all displayed messages immediately.

💡 Examples

Vue 3

<script setup>
import { MessageAlert } from '@dotwake/message-toast';

const handleSubmit = async () => {
  try {
    await submitForm();
    MessageAlert.success('Form submitted successfully!');
  } catch (error) {
    MessageAlert.error('Submission failed, please try again.');
  }
};
</script>

<template>
  <button @click="handleSubmit">Submit</button>
</template>

React

import { MessageAlert } from '@dotwake/message-toast';

function MyComponent() {
  const handleClick = async () => {
    try {
      await fetchData();
      MessageAlert.success('Data loaded!');
    } catch (error) {
      MessageAlert.error('Failed to load data.');
    }
  };

  return (
    <button onClick={handleClick}>
      Load Data
    </button>
  );
}

Vanilla JavaScript

import { MessageAlert } from '@dotwake/message-toast';

document.querySelector('#submit-btn').addEventListener('click', () => {
  MessageAlert.success('Button clicked!');
});

📝 License

MIT License - feel free to use in your projects!