Toast

You can use this single component to push notifications to your users and choose from multiple sizes, colors, styles, and positions. You can the example usage below, the component can be used as a single component and style it extensively by yourself if you desire.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import ToastContainer from './components/toast';

const App = () => {
  const [toasts, setToasts] = useState([]);

  const addToast = ({ title, description, type, duration = 3000 }) => {
    const newToast = { title, description, type, duration };
    setToasts((prevToasts) => [...prevToasts, newToast]);

    setTimeout(() => {
      dismissToast(toasts.length);
    }, duration);
  };

  const dismissToast = (index) => {
    setToasts((prevToasts) => prevToasts.filter((_, i) => i !== index));
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Toast Notifications</h1>
      <button
        onClick={() => addToast({ title: 'Success!', description: 'This is a success message!', type: 'success' })}
        className="mr-2 px-4 py-2 bg-green-600 text-white rounded"
      >
        Show Success Toast
      </button>
      <button
        onClick={() => addToast({ title: 'Error!', description: 'This is an error message!', type: 'error' })}
        className="mr-2 px-4 py-2 bg-red-600 text-white rounded"
      >
        Show Error Toast
      </button>
      <button
        onClick={() => addToast({ title: 'Warning!', description: 'This is a warning message!', type: 'warning' })}
        className="mr-2 px-4 py-2 bg-yellow-600 text-white rounded"
      >
        Show Warning Toast
      </button>
      <button
        onClick={() => addToast({ title: 'Info!', description: 'This is an info message!', type: 'info' })}
        className="px-4 py-2 bg-blue-600 text-white rounded"
      >
        Show Info Toast
      </button>

      <ToastContainer
        toasts={toasts}
        onDismiss={dismissToast}
        position="topRight" // Choose from "topRight", "topLeft", "bottomRight", "bottomLeft"
        size="medium" // Choose from "small", "medium", "large"
        className="z-50"
      />
    </div>
  );
};

export default App;

Component

toast.jsx

// Toast.jsx
import React from 'react';

const Toast = ({ title, description, type, onDismiss, className, size }) => {
  const typeStyles = {
    success: 'bg-green-500 text-white',
    error: 'bg-red-500 text-white',
    warning: 'bg-yellow-500 text-white',
    info: 'bg-blue-500 text-white',
  };

  const sizeStyles = {
    small: 'text-sm p-2',
    medium: 'text-base p-4',
    large: 'text-lg p-6',
  };

  return (
    <div className={`flex flex-col p-4 rounded shadow-md ${typeStyles[type]} ${sizeStyles[size]} ${className}`}>
      {title && <h4 className="font-semibold">{title}</h4>}
      {description && <p>{description}</p>}
      <button onClick={onDismiss} className="mt-2 text-white">
        &times;
      </button>
    </div>
  );
};

const ToastContainer = ({ toasts, onDismiss, position, size, className }) => {
  const positionStyles = {
    topRight: 'fixed top-4 right-4',
    topLeft: 'fixed top-4 left-4',
    bottomRight: 'fixed bottom-4 right-4',
    bottomLeft: 'fixed bottom-4 left-4',
  };

  return (
    <div className={`${positionStyles[position]} space-y-2 ${className}`}>
      {toasts.map((toast, index) => (
        <Toast
          key={index}
          title={toast.title}
          description={toast.description}
          type={toast.type}
          onDismiss={() => onDismiss(index)}
          size={size}
        />
      ))}
    </div>
  );
};

export default ToastContainer;