Modal

The following modal component is used to display content in a modal. It is a single component and you can customize it very easily via Tailwind on the spot. You can also style the overlay, define a title specifcally as well the main content via footer. In any some logic is required on close we have it covered too

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Modal from './components/modal';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div className="flex items-center justify-center h-screen">
      <button
        onClick={openModal}
        className="bg-blue-500 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-600 transition"
      >
        Open Modal
      </button>

      <Modal
        isOpen={isOpen}
        onClose={closeModal}
        title="My Custom Modal"
        className="bg-gray-100" // Customize modal styles here
        overlayClassName="bg-opacity-70" // Customize overlay styles here
        footer={
          <div className="flex justify-end">
            <button
              onClick={closeModal}
              className="bg-green-500 text-white px-4 py-2 rounded-lg shadow hover:bg-green-600 transition"
            >
              Close
            </button>
          </div>
        }
      >
        <p>This is the content of the modal. You can customize it as needed.</p>
      </Modal>
    </div>
  );
}

export default App;

Component

modal.jsx

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

const Modal = ({
  isOpen,
  onClose,
  title,
  children,
  footer,
  className = '',
  overlayClassName = '',
}) => {
  if (!isOpen) return null;

  return (
    <>
      <div
        className={`fixed inset-0 bg-black opacity-50 ${overlayClassName}`}
        onClick={onClose}
      ></div>
      <div className="fixed inset-0 flex items-center justify-center">
        <div className={`bg-white rounded-lg shadow-lg p-6 max-w-lg w-full ${className}`}>
          {title && (
            <h2 className="text-lg font-bold border-b pb-2 mb-4">{title}</h2>
          )}
          <div className="modal-content">{children}</div>
          {footer && <div className="mt-4 border-t pt-2">{footer}</div>}
          <button
            onClick={onClose}
            className="absolute top-2 right-2 text-gray-600 hover:text-gray-800"
          >
            &times;
          </button>
        </div>
      </div>
    </>
  );
};

export default Modal;