React Modern Toast

A modern, accessible, and feature-rich toast notification library for React applications with sound effects and custom positioning.

✨ Features

• 🎨 Modern Design - Beautiful, responsive toast notifications
• 🌙 Dark Mode Support - Automatically adapts to system theme
• ⏱️ Smart Timer - Pause on hover, resume on leave
• 📱 Mobile Responsive - Works perfectly on all devices
• ♿ Accessible - Built with accessibility in mind
• 🎭 Smooth Animations - Elegant enter/exit animations
• 📊 Progress Bar - Visual timer with smooth progress
• 🎯 TypeScript - Full TypeScript support
• 🚀 Lightweight - Minimal bundle size
• 🔧 Customizable - Easy to customize and extend
• 🎵 Sound Effects - Different tones for each toast type
• 📍 Custom Positioning - 7 different positions on screen

📦 Installation

npm install react-modern-toast

🚀 Quick Start

import React from 'react';
import { ToastProvider, toast } from 'react-modern-toast';
import 'react-modern-toast/dist/styles/Toast.css';

const MyComponent = () => {
  const handleClick = () => {
    toast.success('Hello, World!', 3000);
  };

  const handleCustomPosition = () => {
    toast.success('Hello from center!', { 
      position: 'center', 
      duration: 3000 
    });
  };

  const handleWithSound = () => {
    toast.success('Success with sound!', { 
      sound: true,
      duration: 3000 
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Show Toast</button>
      <button onClick={handleCustomPosition}>Show Center Toast</button>
      <button onClick={handleWithSound}>Show Toast with Sound</button>
    </div>
  );
};

const App = () => {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
};

📖 API Reference

ToastProvider

The main provider component that wraps your application.

import { ToastProvider } from 'react-modern-toast';

<ToastProvider>
  <YourApp />
</ToastProvider>

Toast API

Simple and clean API for showing toasts from anywhere in your app.

import { toast } from 'react-modern-toast';

// Basic usage
toast.success('Operation completed!');
toast.error('Something went wrong!');
toast.info('Here is some information');
toast.warning('Please be careful');
toast.warn('Warning message'); // Alias for warning

// With custom duration
toast.success('Success!', 5000);
toast.error('Error!', 10000);

// With custom position
toast.success('Success!', { position: 'center', duration: 5000 });
toast.error('Error!', { position: 'bottom-right', duration: 10000 });

// With sound effects
toast.success('Success!', { sound: true });
toast.error('Error!', { sound: false }); // Disable sound

Available Methods:

• toast.success(message, options?) - Green success toast
• toast.error(message, options?) - Red error toast
• toast.info(message, options?) - Blue info toast
• toast.warning(message, options?) - Orange warning toast
• toast.warn(message, options?) - Alias for warning

Options:

• duration?: number - Duration in milliseconds (default: 4000)
• position?: ToastPosition - Position on screen (default: 'top-right')
• sound?: boolean - Enable/disable speech synthesis (default: false)
• volume?: number - Volume level from 0.1 to 1.0 (default: 0.8)
• voice?: string - Voice name for speech synthesis
• rate?: number - Speech rate from 0.1 to 10 (default: 1)
• pitch?: number - Speech pitch from 0 to 2 (default: 1)

Toast Types

• success - Green toast with checkmark icon
• error - Red toast with X icon
• info - Blue toast with info icon
• warning - Orange toast with warning icon

Toast Positions

• top-left - Top left corner
• top-right - Top right corner (default)
• top-center - Top center
• bottom-left - Bottom left corner
• bottom-right - Bottom right corner
• bottom-center - Bottom center
• center - Screen center

Speech Synthesis

Each toast type has speech synthesis with text-to-speech functionality:

• Success: Speaks "Success: [message]" with positive voice
• Error: Speaks "Error: [message]" with attention-grabbing voice
• Info: Speaks "Info: [message]" with neutral voice
• Warning: Speaks "Warning: [message]" with cautionary voice

Speech Controls: You can control various aspects of the speech:

// With custom volume and speech rate
toast.success('Success!', { sound: true, volume: 0.8, rate: 1.2 });

// With pitch control
toast.info('Info!', { sound: true, volume: 0.9, pitch: 1.5 });

// With all speech options
toast.error('Error!', { 
  sound: true, 
  volume: 0.7, 
  rate: 0.8, 
  pitch: 0.5 
});

🎨 Examples

import { toast } from 'react-modern-toast';

const MyComponent = () => {
  return (
    <div>
      <button onClick={() => toast.success('Operation completed!')}>
        Show Success Toast
      </button>
      
      <button onClick={() => toast.error('Something went wrong!', 5000)}>
        Show Error Toast (5s)
      </button>
      
      <button onClick={() => toast.info('Here is some information')}>
        Show Info Toast
      </button>
      
      <button onClick={() => toast.warn('Please be careful')}>
        Show Warning Toast
      </button>
      
      <button onClick={() => toast.success('Center toast!', { position: 'center' })}>
        Show Center Toast
      </button>
      
      <button onClick={() => toast.error('Bottom right!', { position: 'bottom-right', duration: 3000 })}>
        Show Bottom Right Toast
      </button>
      
      <button onClick={() => toast.success('With sound!', { sound: true })}>
        Show Toast with Sound 🔊
      </button>
      
      <button onClick={() => toast.error('Without sound!', { sound: false })}>
        Show Toast without Sound 🔇
      </button>
      
      <button onClick={() => toast.success('With custom volume!', { sound: true, volume: 0.8, rate: 1.2 })}>
        Show Toast with Speech 🔊
      </button>
    </div>
  );
};

🎯 Features in Detail

Hover to Pause

Toasts automatically pause their timer when you hover over them and resume when you move the mouse away.

Progress Bar

Each toast shows a visual progress bar that indicates how much time is remaining.

Dark Mode

The library automatically detects your system's theme preference and adapts the toast styling accordingly.

Responsive Design

Toasts are fully responsive and work great on mobile devices with optimized spacing and sizing.

Speech Synthesis

Built-in speech synthesis provides spoken feedback for different toast types, making the experience more accessible and engaging.

Custom Positioning

Choose from 7 different positions to place toasts exactly where you want them on the screen.

Accessibility

• Proper ARIA labels
• Keyboard navigation support
• Screen reader friendly
• High contrast support

🎨 Customization

CSS Customization

You can customize the appearance by overriding the CSS classes:

.custom-toast {
  /* Your custom styles */
}

.custom-toast-success {
  /* Custom success toast styles */
}

.custom-toast-container-top-left {
  /* Custom top-left position styles */
}

Theme Variables

The library uses CSS custom properties for easy theming:

:root {
  --toast-border-radius: 12px;
  --toast-padding: 1rem;
  --toast-font-size: 1rem;
}
## 📞 Support

If you need help or have questions about this library, feel free to reach out:

- **Email**: [email protected]

---

**Made with ❤️ by Brijesh Vishwakarma**