Snackbar

Snackbar.tsx

import React, { useEffect, useRef } from 'react';
import './Snackbar.css';

interface SnackbarProps {
  message: string;
  duration?: number;
  onClose?: () => void;
}

const Snackbar: React.FunctionComponent<SnackbarProps> = ({
  message,
  duration = 3000,
  onClose,
}: SnackbarProps) => {
  const snackbarRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (snackbarRef.current) {
        snackbarRef.current.classList.remove('show');
        if (onClose) {
          onClose();
        }
      }
    }, duration);

    return () => clearTimeout(timeout);
  }, [duration, onClose]);

  const handleClick = () => {
    if (snackbarRef.current) {
      snackbarRef.current.classList.remove('show');
      if (onClose) {
        onClose();
      }
    }
  };

  return (
    <div className="snackbar" ref={snackbarRef}>
      <div className="message">{message}</div>
      <button className="close-btn" onClick={handleClick}>
        X
      </button>
    </div>
  );
};

export default Snackbar;

Snackbar.module.css

.snackbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  z-index: 999;
  transition: opacity 0.2s ease-in-out;
}

.snackbar.success {
  background-color: #4caf50;
}

.snackbar.error {
  background-color: #f44336;
}

.snackbar.warning {
  background-color: #ff9800;
}

.snackbar.info {
  background-color: #2196f3;
}

Related Components