React Custom Toast Notifications

A highly customizable toast notification system for React applications with smooth animations and extensive styling options.

Features ✨

• 🎨 Highly Customizable - Extensive styling options with Tailwind CSS support
• 🚀 Smooth Animations - Polished entrance and exit animations
• 🔧 TypeScript Support - Built with TypeScript for better developer experience
• 📱 Responsive - Works seamlessly across all device sizes
• 🎯 Multiple Positions - 6 different toast positions
• ⚡ Lightweight - Minimal bundle size with zero dependencies
• 🎪 Toast Types - Success, Error, Warning, and Info variants

Installation 📦

npm install react-custom-toast-notifications
# or
yarn add react-custom-toast-notifications
# or
pnpm add react-custom-toast-notifications

Basic Usage 🚀

1. Wrap your app with ToastProvider:

import { ToastProvider } from 'react-custom-toast-notifications';

function App() {
  return (
    <ToastProvider position="top-right">
      <YourApp />
    </ToastProvider>
  );
}

2. Use the useToast hook in your components:

import { useToast } from 'react-custom-toast-notifications';

function MyComponent() {
  const { addToast } = useToast();
  
  const showNotification = () => {
    addToast('Operation successful!', {
      type: 'success',
      duration: 5000
    });
  };
  
  return <button onClick={showNotification}>Show Toast</button>;
}

Customization Options ⚙️

Position Options

• top-right (default)
• top-left
• top-center
• bottom-right
• bottom-left
• bottom-center

Toast Types

• success - For successful operations
• error - For error messages
• info - For informational messages
• warning - For warning alerts

Configuration Interface

interface ToastOptions {
  type?: 'success' | 'error' | 'info' | 'warning';
  duration?: number;
  showIcon?: boolean;
  showCloseButton?: boolean;
  className?: string;
  icon?: React.ComponentType;
  animation?: {
    enter?: string;
    exit?: string;
    duration?: number;
  };
  onClose?: () => void;
  onClick?: () => void;
}

interface ToastProviderProps {
  position?: Position;
  containerClassName?: string;
  maxToasts?: number;
  defaultDuration?: number;
  containerStyle?: React.CSSProperties;
  pauseOnHover?: boolean;
  closeOnClick?: boolean;
}

Advanced Usage 🔧

Custom Styling

// Using Tailwind classes
<ToastProvider
  position="top-right"
  containerClassName="space-y-2 p-4"
>
  <YourApp />
</ToastProvider>

// Custom toast styling
addToast('Custom styled toast!', {
  className: 'bg-purple-500 text-white font-bold rounded-xl',
  showIcon: true,
  duration: 3000
});

Custom Icons

import { CustomIcon } from './icons';

addToast('Message with custom icon', {
  icon: CustomIcon,
  type: 'info'
});

Promise Integration

const { promiseToast } = useToast();

const handleAsyncOperation = async () => {
  await promiseToast(
    asyncOperation(),
    {
      loading: 'Processing...',
      success: 'Operation completed!',
      error: (err) => `Error: ${err.message}`
    }
  );
};

Animation Customization

<ToastProvider
  position="top-right"
  animation={{
    enter: 'slide-in',
    exit: 'fade-out',
    duration: 300
  }}
>
  <YourApp />
</ToastProvider>

Examples 📚

Basic Success Toast

addToast('Successfully saved!', { type: 'success' });

Error Toast with Custom Duration

addToast('Operation failed!', {
  type: 'error',
  duration: 8000,
  showCloseButton: true
});

Info Toast with Custom Icon and Styling

addToast('New update available!', {
  type: 'info',
  icon: UpdateIcon,
  className: 'bg-blue-100 border-l-4 border-blue-500'
});

Browser Support 🌐

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

Contributing 🤝

Contributions are always welcome! Please follow these steps:

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

Support 💬

• Create an issue on GitHub
• Join our Discord community
• Follow updates on Twitter

Credits 🙏

Developed and maintained by malicious-dev

Changelog 📝

See CHANGELOG.md for details.