@vincentwings/react-modal/dist/index.js

A lightweight and flexible modal component for React, inspired by jquery-modal.

// src/Modal.jsx
import React, { useEffect, useRef, useState } from "react";
var Modal = ({
  isOpen,
  // Whether modal is open
  onClose,
  // Function to call on close
  fadeDuration = 300,
  // ms of fade animation
  fadeDelay = 0.5,
  // multiplier delay before content animates
  escapeClose = true,
  // can close modal with Escape key
  clickClose = true,
  // can close modal by clicking overlay
  showClose = true,
  // show close "×" button in corner
  closeText = "\xD7",
  // text/icon inside close button
  useTransform = true,
  // whether modal should slide in (translateY)
  useBorderRadius = true,
  // whether modal should have rounded corners
  overlayColor = "rgba(0, 0, 0, 0.4)",
  // background of the overlay
  backgroundColor = "#fff",
  // background of modal itself
  textColor = "#2a2a2a",
  // default text color inside modal
  borderRadius = "12px",
  // default radius for modal box
  children
  // content of the modal
}) => {
  const modalRef = useRef();
  const [visible, setVisible] = useState(false);
  const [animating, setAnimating] = useState(false);
  useEffect(() => {
    if (isOpen) {
      setVisible(true);
      setTimeout(() => setAnimating(true), fadeDuration * fadeDelay);
    } else if (visible) {
      setAnimating(false);
      setTimeout(() => setVisible(false), fadeDuration);
    }
  }, [isOpen, fadeDuration, fadeDelay, visible]);
  useEffect(() => {
    if (!visible || !modalRef.current) return;
    const focusables = modalRef.current.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    if (focusables.length > 0) focusables[0].focus();
    const handleKeyDown = (e) => {
      if (escapeClose && e.key === "Escape") {
        onClose();
        return;
      }
      if (e.key === "Tab") {
        handleFocusTrap(e, focusables);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [visible, escapeClose, onClose]);
  const handleFocusTrap = (e, focusables) => {
    const first = focusables[0];
    const last = focusables[focusables.length - 1];
    const isShiftTab = e.shiftKey && document.activeElement === first;
    const isTabAtEnd = !e.shiftKey && document.activeElement === last;
    if (isShiftTab || isTabAtEnd) {
      e.preventDefault();
      const target = isShiftTab ? last : first;
      target.focus();
    }
  };
  if (!visible) return null;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `modal-overlay ${animating ? "open" : ""}`,
      onClick: clickClose ? onClose : void 0,
      role: "dialog",
      "aria-modal": "true",
      style: {
        backgroundColor: overlayColor,
        transition: `opacity ${fadeDuration}ms`,
        opacity: animating ? 1 : 0,
        pointerEvents: animating ? "auto" : "none"
      }
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: `modal ${animating ? "open" : ""}`,
        onClick: (e) => e.stopPropagation(),
        ref: modalRef,
        style: {
          transition: `opacity ${fadeDuration}ms, transform ${fadeDuration}ms`,
          opacity: animating ? 1 : 0,
          transform: useTransform ? animating ? "translateY(0)" : "translateY(-20px)" : "none",
          backgroundColor,
          color: textColor,
          borderRadius: useBorderRadius ? borderRadius : "0"
        }
      },
      showClose && /* @__PURE__ */ React.createElement("button", { className: "modal-close", onClick: onClose }, closeText),
      /* @__PURE__ */ React.createElement("div", { className: "modal-content" }, children)
    )
  );
};
var Modal_default = Modal;

// src/ModalManager.jsx
import React2, { useState as useState2, useContext, createContext } from "react";
var ModalContext = createContext();
var ModalProvider = ({ children }) => {
  const [isOpen, setIsOpen] = useState2(false);
  const [modalContent, setModalContent] = useState2(null);
  const [modalOptions, setModalOptions] = useState2({});
  const openModal = (content, options = {}) => {
    setIsOpen(false);
    setTimeout(() => {
      setModalContent(content);
      setModalOptions(options);
      setIsOpen(true);
    }, 10);
  };
  const closeModal = () => {
    setIsOpen(false);
    setModalContent(null);
    setModalOptions({});
  };
  return (
    // Provide modal context to the children tree
    /* @__PURE__ */ React2.createElement(ModalContext.Provider, { value: { openModal, closeModal } }, children, /* @__PURE__ */ React2.createElement(Modal_default, { isOpen, onClose: closeModal, ...modalOptions }, modalContent))
  );
};
var useModal = () => useContext(ModalContext);
export {
  Modal_default as Modal,
  ModalProvider,
  useModal
};
//# sourceMappingURL=index.js.map