Modal component with in out animation

Great! Here's a fully reusable React <Modal> component with:

• title, isOpen, onClose, and children props

• Smooth in/out animation

• Pure CSS (can use Tailwind classes or raw CSS)

• Focus on flexibility and clean separation

---

✅ 1. Modal.jsx — Reusable Component

import { useEffect, useState } from "react";
import "./Modal.css"; // or global.css

const Modal = ({ isOpen, onClose, title, children }) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (isOpen) {
      setVisible(true);
    } else {
      const timeout = setTimeout(() => setVisible(false), 300); // match exit animation
      return () => clearTimeout(timeout);
    }
  }, [isOpen]);

  // ESC key support
  useEffect(() => {
    const handleEsc = (e) => {
      if (e.key === "Escape") onClose?.();
    };
    window.addEventListener("keydown", handleEsc);
    return () => window.removeEventListener("keydown", handleEsc);
  }, [onClose]);

  if (!visible) return null;

  return (
    <div
      className={`modal-overlay ${isOpen ? "fade-in" : "fade-out"}`}
      onClick={onClose}
    >
      <div
        className={`modal-content ${isOpen ? "fade-up-scale" : "fade-down-scale"}`}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          className="close-button"
          onClick={onClose}
        >
          &times;
        </button>
        {title && <h2 className="modal-title">{title}</h2>}
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
};

export default Modal;

---

✅ 2. Modal.css — Animation Styles

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

.modal-content {
  background: white;
  padding: 1.5rem 2rem;
  border-radius: 0.75rem;
  position: relative;
  min-width: 300px;
  max-width: 90%;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.fade-up-scale {
  animation: fadeUpScale 0.3s ease-out forwards;
}

.fade-down-scale {
  animation: fadeDownScale 0.3s ease-in forwards;
}

@keyframes fadeUpScale {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeDownScale {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

@keyframes fadeIn {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.4);
  }
}

@keyframes fadeOut {
  from {
    background: rgba(0, 0, 0, 0.4);
  }
  to {
    background: rgba(0, 0, 0, 0);
  }
}

.close-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.modal-body {
  font-size: 1rem;
  line-height: 1.5;
}

---

✅ 3. Usage Example

import { useState } from "react";
import Modal from "@/components/Modal";

export default function DemoPage() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="p-6">
      <button
        onClick={() => setIsOpen(true)}
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        Show Modal
      </button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Reusable Modal"
      >
        <p>This is a reusable modal component with in/out animations.</p>
      </Modal>
    </div>
  );
}

---

✅ Props Summary

Prop	Type	Description
isOpen	boolean	Show/hide the modal
onClose	function	Called when modal is dismissed (click or ESC)
title	string	Optional title displayed at top
children	ReactNode	Modal content body