modale-react-rm/dist/index.es.js

Simple modale with a popup reaction style in React

import e from"react";import{jsx as t,jsxs as o}from"react/jsx-runtime";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".modale{background-color:rgba(0,0,0,.555);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.content{background-color:#fff;border:1px solid;border-radius:5px;box-shadow:3px 3px 8px #000;left:0;line-height:150px;min-height:150px;padding:20px;position:relative;text-align:center;top:35%;width:55%}.content,.text{display:block;margin:auto}.text{font-size:2rem;overflow:auto;width:100%}.close{background:rgba(255,254,254,.831);border:3px solid #000;border-radius:100%;box-shadow:3px 3px 8px #000;color:#000;cursor:pointer;font-size:1.2rem;font-weight:700;position:absolute;right:-16px;top:-16px;transition:.3s}.close:hover{transform:scale(1.1)}"),window.React=e;const r=e=>e.trigger?t("div",{className:"modale",children:o("div",{className:"content",children:[t("button",{className:"close",onClick:()=>e.setTrigger(!1),children:"X"}),t("span",{className:"text",children:e.content})]})}):"";export{r as Modale};