hs-library/dist/Modal.js

Optimistic UI library for React and Next.js. Modern, reusable components: Inputs, Buttons, Cards, Dropdowns, Modals, Toasts — and more magical UI tools for frontend developers. author: Hitesh Saini

import React, { useEffect } from "react";
import "./index.css";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Modal = function Modal(_ref) {
  var isOpen = _ref.isOpen,
    onClose = _ref.onClose,
    children = _ref.children,
    closeIcon = _ref.closeIcon,
    _ref$closePosition = _ref.closePosition,
    closePosition = _ref$closePosition === void 0 ? "top-right" : _ref$closePosition;
  useEffect(function () {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }
    return function () {
      document.body.style.overflow = "auto";
    };
  }, [isOpen]);
  if (!isOpen) return null;
  return /*#__PURE__*/_jsx("div", {
    className: "hs_modal-overlay",
    onClick: onClose,
    children: /*#__PURE__*/_jsxs("div", {
      className: "hs_modal-content",
      children: [/*#__PURE__*/_jsx("div", {
        className: "hs_close-btn hs_".concat(closePosition),
        onClick: onClose,
        children: closeIcon || "✖"
      }), /*#__PURE__*/_jsx("div", {
        className: "hs_modal-body",
        children: children
      })]
    })
  });
};
export default Modal;