Aesthetic Toast Library 🎨

A beautiful and highly customizable toast notification library for React applications with 6 different design options and multiple positioning choices.

✨ Features

• 🎨 6 Beautiful Designs: Modern Minimal, Glassmorphism, Neumorphism, Material Design, Dark Theme, and Gradient
• 📍 6 Positions: Top-left, Top-right, Top-center, Bottom-left, Bottom-right, Bottom-center
• 🎯 5 Toast Types: Success, Error, Warning, Info, Default
• ⚡ Progress Bar: Visual countdown with pause on hover
• 📱 Responsive: Works perfectly on all devices
• ♿ Accessible: ARIA labels and keyboard navigation
• 🔧 TypeScript: Full TypeScript support
• 🎭 Customizable: Easy to customize colors, animations, and styles
• 📦 Tree-shakable: Only import what you need

🚀 Quick Start

Installation

npm install aesthetic-toast-library

Basic Usage

import React from 'react';
import { ToastProvider, useToast } from 'aesthetic-toast-library';

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

function MyComponent() {
  const { addToast } = useToast();

  const showToast = () => {
    addToast({
      message: 'Hello from Aesthetic Toast!',
      type: 'success',
      design: 'A',
      duration: 3000
    });
  };

  return (
    <button onClick={showToast}>
      Show Toast
    </button>
  );
}

🎨 Design Options

Design A - Modern Minimal

addToast({
  message: 'Modern minimal design',
  type: 'success',
  design: 'A'
});

Design B - Glassmorphism

addToast({
  message: 'Glassmorphism effect',
  type: 'info',
  design: 'B'
});

Design C - Neumorphism

addToast({
  message: 'Neumorphic design',
  type: 'warning',
  design: 'C'
});

Design D - Material Design

addToast({
  message: 'Material design style',
  type: 'error',
  design: 'D'
});

Design E - Dark Theme

addToast({
  message: 'Dark theme toast',
  type: 'info',
  design: 'E'
});

Design F - Gradient

addToast({
  message: 'Gradient background',
  type: 'success',
  design: 'F'
});

📍 Position Options

// All available positions
const positions = [
  'top-left',
  'top-right', 
  'top-center',
  'bottom-left',
  'bottom-right',
  'bottom-center'
];

addToast({
  message: 'Positioned toast',
  position: 'bottom-center',
  design: 'A'
});

🎯 Toast Types

// Success toast
addToast({
  message: 'Operation completed successfully!',
  type: 'success',
  design: 'A'
});

// Error toast
addToast({
  message: 'Something went wrong!',
  type: 'error',
  design: 'B'
});

// Warning toast
addToast({
  message: 'Please check your input',
  type: 'warning',
  design: 'C'
});

// Info toast
addToast({
  message: 'Here is some information',
  type: 'info',
  design: 'D'
});

// Default toast
addToast({
  message: 'Default notification',
  type: 'default',
  design: 'E'
});

⚙️ Advanced Configuration

ToastProvider Props

<ToastProvider
  maxToasts={5}
  defaultPosition="top-right"
  defaultDuration={3000}
  defaultType="default"
  defaultDesign="A"
  containerClassName="my-toast-container"
  containerStyle={{ zIndex: 10000 }}
>
  <App />
</ToastProvider>

Toast Options

addToast({
  message: 'Custom toast',
  type: 'success',
  design: 'A',
  duration: 5000, // 5 seconds
  position: 'bottom-center',
  title: 'Custom Title', // Optional title
  icon: '🎉', // Custom icon
  showProgress: true, // Show progress bar
  pauseOnHover: true, // Pause on hover
  className: 'my-custom-toast',
  style: { 
    backgroundColor: '#custom-color',
    borderRadius: '20px'
  },
  onClose: (id) => {
    console.log(`Toast ${id} closed`);
  }
});

🔧 API Reference

useToast Hook

const { 
  toasts, 
  addToast, 
  removeToast, 
  clearAll, 
  updateToast 
} = useToast();

Methods

• addToast(options): Add a new toast
• removeToast(id): Remove a specific toast
• clearAll(): Remove all toasts
• updateToast(id, updates): Update an existing toast

Toast Options

| Property | Type | Default | Description | |----------|------|---------|-------------| | message | string | - | Toast message (required) | | type | 'success' \| 'error' \| 'warning' \| 'info' \| 'default' | 'default' | Toast type | | design | 'A' \| 'B' \| 'C' \| 'D' \| 'E' \| 'F' | 'A' | Design style | | duration | number | 3000 | Auto-close duration (ms) | | position | ToastPosition | 'top-right' | Toast position | | title | string | - | Optional title | | icon | ReactNode | - | Custom icon | | showProgress | boolean | true | Show progress bar | | pauseOnHover | boolean | true | Pause on hover | | className | string | - | Additional CSS class | | style | CSSProperties | - | Additional inline styles | | onClose | (id: string) => void | - | Close callback |

Positions

• top-left
• top-right
• top-center
• bottom-left
• bottom-right
• bottom-center

Designs

• A - Modern Minimal
• B - Glassmorphism
• C - Neumorphism
• D - Material Design
• E - Dark Theme
• F - Gradient

🎨 Customization

Custom Colors

/* Override default colors */
.toast-success {
  --toast-bg: #your-success-color;
  --toast-border: #your-success-border;
  --toast-text: #your-text-color;
}

Custom Animations

/* Add custom animations */
@keyframes myCustomAnimation {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.toast-design-a {
  animation: myCustomAnimation 0.5s ease;
}

📱 Responsive Design

The library automatically adapts to different screen sizes:

• Desktop: Full design with all features
• Tablet: Optimized spacing and sizing
• Mobile: Simplified layout with touch-friendly interactions

♿ Accessibility

• ARIA labels for screen readers
• Keyboard navigation support
• High contrast color schemes
• Focus management
• Semantic HTML structure

🧪 Examples

Multiple Toasts

function ShowMultipleToasts() {
  const { addToast, clearAll } = useToast();

  const showAll = () => {
    addToast({ message: 'Design A', design: 'A', type: 'success' });
    addToast({ message: 'Design B', design: 'B', type: 'info' });
    addToast({ message: 'Design C', design: 'C', type: 'warning' });
    addToast({ message: 'Design D', design: 'D', type: 'error' });
    addToast({ message: 'Design E', design: 'E', type: 'default' });
    addToast({ message: 'Design F', design: 'F', type: 'success' });
  };

  return (
    <div>
      <button onClick={showAll}>Show All Designs</button>
      <button onClick={clearAll}>Clear All</button>
    </div>
  );
}

Different Positions

function ShowAllPositions() {
  const { addToast } = useToast();

  const positions = [
    'top-left', 'top-right', 'top-center',
    'bottom-left', 'bottom-right', 'bottom-center'
  ];

  const showAllPositions = () => {
    positions.forEach((position, index) => {
      setTimeout(() => {
        addToast({
          message: `Position: ${position}`,
          position: position as any,
          design: 'A',
          type: 'info'
        });
      }, index * 500);
    });
  };

  return <button onClick={showAllPositions}>Show All Positions</button>;
}

Custom Styling

addToast({
  message: 'Custom styled toast',
  design: 'A',
  type: 'success',
  className: 'my-custom-toast',
  style: {
    background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
    borderRadius: '25px',
    boxShadow: '0 15px 35px rgba(0,0,0,0.2)',
    border: '2px solid #fff'
  },
  icon: '🚀',
  title: 'Custom Title'
});

🚀 Performance

• Lightweight bundle size
• Efficient rendering with React hooks
• Optimized animations
• Memory leak prevention
• Tree-shakable exports

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by modern UI design trends
• Built with React and TypeScript
• Styled with CSS custom properties
• Tested across multiple browsers and devices