Alert

The following alert component is used to show success, error, warning and info or any other messages. It is a single component and highly versatile allowing you to define your own variants and you may set duration it appears for, onClose and if it should be dismissed automatically. You can style it in place via Tailwind and className.

Dependencies

Install the following libraries. Assuming you have Tailwind CSS installed

npm install framer-motion lucide-react

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Alert from './components/alert';
import { Home } from 'lucide-react';

const App = () => {
  const [showAlert, setShowAlert] = useState(true);

  return (
    <div className="flex justify-center items-center h-screen">
      {showAlert && (
        <Alert
          message="This is a success alert!"
          variant="error"
          onClose={() => setShowAlert(false)}
          autoDismiss={true}
          duration={1000}
        />
      )}
      <button
        onClick={() => setShowAlert(true)}
        className="p-2 text-white bg-blue-500 rounded"
      >
        Show Alert
      </button>
    </div>
  );
};

export default App;

Component

alert.jsx

// Alert.jsx
import React, { useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { CheckCircle, XCircle, TriangleAlert, Info } from 'lucide-react';

const alertVariants = {
  success: {
    icon: <CheckCircle className="w-5 h-5 text-green-600" />,
    className: 'bg-green-100 text-green-700 border-green-500/50 text-sm',
  },
  error: {
    icon: <XCircle className="w-5 h-5 text-red-600" />,
    className: 'bg-red-100 text-red-700 border-red-500/50 text-sm',
  },
  warning: {
    icon: <TriangleAlert className="w-5 h-5 text-yellow-600" />,
    className: 'bg-yellow-100 text-yellow-700 border-yellow-500/50 text-sm',
  },
  info: {
    icon: <Info className="w-5 h-5 text-blue-600" />,
    className: 'bg-blue-100 text-blue-700 border-blue-500/50 text-sm',
  },
};

const Alert = ({ message, variant = 'info', onClose, autoDismiss = false, duration = 3000, className = '' }) => {
  useEffect(() => {
    if (autoDismiss) {
      const timer = setTimeout(onClose, duration);
      return () => clearTimeout(timer);
    }
  }, [autoDismiss, duration, onClose]);

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0, translateY: -20 }}
        animate={{ opacity: 1, translateY: 0 }}
        exit={{ opacity: 0, translateY: -20 }}
        className={`flex items-center p-2 mb-4 border-2 justify-between rounded-lg ${alertVariants[variant].className}`}
        role="alert"
      >
        {alertVariants[variant].icon}
        <span className="flex-1 ml-2">{message}</span>
        <button
          onClick={onClose}
          className="ml-4 text-lg font-semibold focus:outline-none"
        >
          &times;
        </button>
      </motion.div>
    </AnimatePresence>
  );
};

export default Alert;

Preview