react-modal-message/dist/index.js

A lightweight and animated modal component for React applications, ideal for form confirmations.

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

function Modal(_ref) {
  var message = _ref.message,
    onClose = _ref.onClose;
  var _useState = React.useState(false),
    isClosing = _useState[0],
    setIsClosing = _useState[1];
  var _useState2 = React.useState(false),
    isVisible = _useState2[0],
    setIsVisible = _useState2[1];
  React.useEffect(function () {
    var timeout = setTimeout(function () {
      return setIsVisible(true);
    }, 10);
    return function () {
      return clearTimeout(timeout);
    };
  }, []);
  var handleOverlayClick = function handleOverlayClick() {
    return triggerClose();
  };
  var handleModalClick = function handleModalClick(e) {
    return e.stopPropagation();
  };
  var triggerClose = function triggerClose() {
    setIsClosing(true);
    setTimeout(function () {
      onClose();
    }, 300);
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: "overlay " + (isClosing ? 'hidden' : ''),
    onClick: handleOverlayClick
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "modal " + (isVisible ? '' : 'hidden') + " " + (isClosing ? 'hidden' : ''),
    role: "dialog",
    "aria-modal": "true",
    onClick: handleModalClick
  }, /*#__PURE__*/React__default.createElement("svg", {
    onClick: triggerClose,
    className: "close-button",
    "aria-label": "close",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 512 512",
    width: "24",
    height: "24"
  }, /*#__PURE__*/React__default.createElement("path", {
    fill: "black",
    d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
  })), /*#__PURE__*/React__default.createElement("p", null, message)));
}

exports.Modal = Modal;
//# sourceMappingURL=index.js.map