UNPKG

@muriukialex/react-modal-popup

Version:

A package to create modal pop ups for a React application

3 lines (2 loc) 1.69 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),n=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,o=require("react-dom");function r(){return(r=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(null,arguments)}exports.default=function(t){var i=t.title,l=t.showModal,a=t.onClose,u=t.children,s=t.customContainerStyles,c=void 0===s?{}:s,d=t.customContentStyles,p=void 0===d?{}:d,m=t.customModalButtonStyles,b=void 0===m?{}:m,f=e.useState(null),g=f[0],y=f[1],v="modal-"+Math.random().toString(36).substring(2,9);if(e.useEffect((function(){var t;return(t=document.createElement("div")).setAttribute("id",v),document.body.appendChild(t),y(t),function(){var t=document.getElementById(v);t&&t.remove()}}),[]),null===g)return null;var h=r({position:"absolute",top:"0",bottom:"0",left:"0",right:"0",display:"grid",justifyContent:"center",alignItems:"center",backgroundColor:"rgba(0,0,0,0.3)",transition:"background-color 0.3s"},c),x=r({padding:20,background:"#fff",borderRadius:"2px",display:"inline-block",minHeight:"300px",margin:"1rem",position:"relative",minWidth:"300px",boxShadow:"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",justifySelf:"center",opacity:1,transition:"opacity 0.3s"},p),C=r({position:"absolute",bottom:"10px",right:"14px"},b);return o.createPortal(l?n.createElement("div",{style:h,onClick:a},n.createElement("div",{style:x},i,n.createElement("hr",null),u,n.createElement("button",{style:C,onClick:a},"Close"))):null,g)}; //# sourceMappingURL=react-modal-popup.cjs.production.min.js.map