@kyawthihasoe/react-modalbox/dist/index.esm.js

A customizable React modalbox component with sorting and pagination

import React, { useEffect } from 'react';

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".modal-overlay{align-items:center;animation:fadeIn .2s ease-out;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{animation:slideIn .2s ease-out;background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;position:relative}.modal-small{width:400px}.modal-medium{width:600px}.modal-large{width:800px}.modal-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:16px 24px}.modal-title{color:#333;font-size:1.25rem;font-weight:600;margin:0}.modal-close{background:none;border:none;border-radius:4px;color:#666;cursor:pointer;font-size:24px;line-height:1;padding:4px;transition:all .2s}.modal-close:hover{background-color:#f5f5f5;color:#333}.modal-body{overflow-y:auto;padding:24px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.modal-content{margin:0 20px;width:90%!important}.modal-header{padding:12px 16px}.modal-body{padding:16px}}";
styleInject(css_248z,{"insertAt":"top"});

/**
 * A customizable modal component with various size options and keyboard support.
 *
 * @component
 * @param {ModalProps} props - The component props
 * @returns {React.ReactElement | null} The modal component or null if not open
 *
 * @example
 * ```tsx
 * const [isOpen, setIsOpen] = useState(false);
 *
 * return (
 *   <Modal
 *     isOpen={isOpen}
 *     onClose={() => setIsOpen(false)}
 *     title="My Modal"
 *     size="medium"
 *   >
 *     <p>This is the modal content</p>
 *   </Modal>
 * );
 * ```
 */
var Modal = function (_a) {
    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
    useEffect(function () {
        var handleEscape = function (event) {
            if (event.key === 'Escape') {
                onClose();
            }
        };
        if (isOpen) {
            document.addEventListener('keydown', handleEscape);
            document.body.style.overflow = 'hidden';
        }
        return function () {
            document.removeEventListener('keydown', handleEscape);
            document.body.style.overflow = 'unset';
        };
    }, [isOpen, onClose]);
    if (!isOpen)
        return null;
    return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
        React.createElement("div", { className: "modal-content modal-".concat(size), onClick: function (e) { return e.stopPropagation(); } },
            React.createElement("div", { className: "modal-header" },
                title && React.createElement("h2", { className: "modal-title" }, title),
                React.createElement("button", { className: "modal-close", onClick: onClose }, "\u00D7")),
            React.createElement("div", { className: "modal-body" }, children))));
};

export { Modal };
//# sourceMappingURL=index.esm.js.map