🍞 Toast Library Demo

This is a comprehensive demo application showcasing the features of the my-toast-library React toast notification library.

🚀 Quick Start

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Open your browser: Navigate to http://localhost:3000

📋 Features Demonstrated

Basic Toast Types

• ✅ Success Toasts - Green notifications for successful operations
• ✅ Error Toasts - Red notifications for errors and failures
• ✅ Warning Toasts - Orange notifications for warnings
• ✅ Info Toasts - Blue notifications for informational messages

Advanced Features

• 🎯 Custom Positions - Show toasts in different screen positions
• 🎨 Custom Styling - Apply custom CSS classes and inline styles
• ⏰ Persistent Toasts - Toasts that don't auto-close
• 📱 Multiple Toasts - Display several toasts simultaneously
• 🧹 Toast Management - Clear all toasts with one click

Technical Features

• 📱 Responsive Design - Works perfectly on all device sizes
• ✨ Smooth Animations - Beautiful slide-in and slide-out effects
• 🎛️ Configurable - Customize duration, position, and styling
• 🔧 TypeScript Support - Full type safety and IntelliSense

🛠️ How It Works

This demo uses npm link to connect to your local toast library:

# In the demo directory
npm link my-toast-library

This allows you to test changes to your library in real-time without publishing to npm.

🎮 Interactive Demo

The demo includes interactive buttons for each feature:

1. Basic Toast Types - Test different toast types
2. Advanced Features - Explore custom positioning and styling
3. Toast Management - See current toast count and clear all
4. Features List - Overview of all available features

🔧 Development

Project Structure

demo/
├── src/
│   ├── App.tsx          # Main demo application
│   ├── App.css          # Beautiful styling
│   └── index.tsx        # React entry point
├── public/              # Static assets
├── package.json         # Dependencies and scripts
└── README.md           # This file

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm test - Run tests
• npm run eject - Eject from Create React App

🎨 Customization

The demo showcases how to customize toasts:

// Custom styled toast
addToast({
  message: 'Custom styled toast!',
  type: 'info',
  className: 'my-custom-toast',
  style: {
    backgroundColor: '#9c27b0',
    borderRadius: '20px',
    fontSize: '16px'
  }
});

// Custom position
addToast({
  message: 'Bottom-center toast!',
  type: 'success',
  position: 'bottom-center'
});

// Persistent toast (no auto-close)
addToast({
  message: 'This won\'t auto-close',
  type: 'warning',
  duration: 0
});

📱 Responsive Design

The demo is fully responsive and works on:

• 📱 Mobile phones
• 📱 Tablets
• 💻 Desktop computers
• 🖥️ Large screens

🔗 Library Integration

This demo shows how to integrate the toast library into a React application:

import { ToastProvider, useToast } from 'my-toast-library';

function App() {
  return (
    <ToastProvider 
      maxToasts={5}
      defaultPosition="top-right"
      defaultDuration={3000}
      defaultType="info"
    >
      <YourApp />
    </ToastProvider>
  );
}

🚀 Next Steps

1. Test the demo - Try all the interactive features
2. Modify the library - Make changes to your toast library
3. See changes instantly - Thanks to npm link, changes appear immediately
4. Publish when ready - When satisfied, publish your library to npm

📚 Documentation

For complete documentation of the toast library, see the main project README.

Happy coding! 🎉