MToast Library

A lightweight, customizable toast notification library for React applications. MToast provides a simple and flexible way to display toast notifications with various styles, positions, and customization options.

Features

• 🎨 Multiple toast types (info, success, warning, error, default)
• 📍 6 different positions (top-right, top-center, top-left, bottom-right, bottom-center, bottom-left)
• ⚡ Customizable appearance (colors, icons, sizes)
• 🎯 Auto-dismiss functionality
• 🔄 Smooth animations
• 📱 Responsive design
• 🛠️ Easy to use and integrate

Installation

npm install mtoast-lib
# or
yarn add mtoast-lib

Quick Start

1. Wrap your application with the ToastProvider:

import { ToastProvider } from 'mtoast-lib';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

2. Use the useToast hook in your components:

import { toast } from 'mtoast-lib';

function YourComponent() {

  const showNotification = () => {
    toast.success('Operation completed!', {
      comments: 'Your changes have been saved',
      position: 'top-right'
    });
  };

  return <button onClick={showNotification}>Show Toast</button>;
}

API Reference

useToast Hook

The useToast hook provides methods to show different types of toasts:

const { toast } = useToast();

// Basic usage
toast.info('Information message');
toast.success('Success message');
toast.warning('Warning message');
toast.error('Error message');
toast.default('Default message');

// Dismiss a specific toast
toast.dismiss(toastId);

Toast Options

Each toast method accepts a message and an options object:

toast.success('Message', {
  // Position (string )
  position: 'top-right', // 'top-center', 'top-left, 'bottom-right' ...
  
  // Additional message content
  comments: 'Additional details',
  
  // Custom styling
  backgroundColor: '#4CAF50',
  color: '#FFFFFF',
  
  // Icon customization
  icon: <YourIcon />,
  iconColor: '#FFFFFF',
  
  // Close button customization
  closeButtonColor: '#FFFFFF',
  closeButtonSize: '18px',
  
  // Auto-dismiss timing (in milliseconds)
  autoClose: 5000
});

Available Positions

import { ToastPosition } from 'mtoast-lib';

// String positions
'top-right'
'top-center'
'top-left'
'bottom-right'
'bottom-center'
'bottom-left'

Default Styles

The library comes with predefined styles for different toast types:

• Info: Light blue background with info icon
• Success: Light green background with check icon
• Warning: Light orange background with warning icon
• Error: Light red background with error icon
• Default: Dark background with bell icon
• Custom: Dark background with bell icon (like default)

Customization

You can customize the appearance of toasts by passing style options:

toast.success('Custom styled toast', {
  backgroundColor: '#4CAF50',
  color: '#FFFFFF',
  iconColor: '#FFFFFF',
  closeButtonColor: '#FFFFFF',
  closeButtonSize: '18px'
});

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Your Name]