React Toaster Alert

A beautiful and customizable toast notification component for React applications. Simple to use, yet powerful and feature-rich.

Features

• 🎨 Four types of notifications: Success, Error, Info, and Warning
• ⚡ Smooth animations and transitions
• ⏱️ Auto-dismiss after 3 seconds
• 🎯 Progress bar indicator
• 🔧 Customizable via CSS variables
• 📱 Responsive design
• 🎉 Font Awesome icons included
• 🔥 Zero dependencies (except Font Awesome)
• 📦 Lightweight and performant
• 💪 Written in TypeScript

Installation

npm install react-toaster-alert
# or
yarn add react-toaster-alert

Usage

1. Wrap your app with the ToastProvider:

import { ToastProvider } from 'react-toaster-alert';

function App() {
  return (
    <ToastProvider>
      {/* Your app components */}
    </ToastProvider>
  );
}

2. Add the ToastContainer component to your app:

import { ToastContainer } from 'react-toaster-alert';

function App() {
  return (
    <ToastProvider>
      {/* Your app components */}
      <ToastContainer />
    </ToastProvider>
  );
}

3. Use the useToast hook to show notifications:

import { useToast } from 'react-toaster-alert';

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

  const handleSuccess = () => {
    showToast('Operation completed successfully!', 'success');
  };

  const handleError = () => {
    showToast('An error occurred!', 'error');
  };

  const handleInfo = () => {
    showToast('Here is some information.', 'info');
  };

  const handleWarning = () => {
    showToast('Warning: Please be careful!', 'warning');
  };

  return (
    <div>
      <button onClick={handleSuccess}>Show Success</button>
      <button onClick={handleError}>Show Error</button>
      <button onClick={handleInfo}>Show Info</button>
      <button onClick={handleWarning}>Show Warning</button>
    </div>
  );
}

Customization

You can customize the colors using CSS variables:

:root {
  --success-color: #28a745;
  --error-color: #dc3545;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
}

API Reference

ToastProvider

The context provider that enables the toast functionality.

<ToastProvider>
  {/* Your app components */}
</ToastProvider>

ToastContainer

The component that renders the toast notifications.

<ToastContainer />

useToast Hook

const { showToast } = useToast();

showToast(message: string, type: 'success' | 'error' | 'info' | 'warning');

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

MIT © Vipul Kumar