react-notification-npm/dist/index.js

react notification library

"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("colord"),o=require("react-icons/ai");var n="notification-module_notification__4oN1U",r="notification-module_notification-open__50xIb",s="notification-module_notification-text__FdOrX";!function(e,t){void 0===t&&(t={});var i=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".notification-module_toast-container__UdtqQ{display:flex;flex-direction:column-reverse;gap:10px;position:fixed;right:20px;top:20px;z-index:1000}.notification-module_notification__4oN1U{align-items:center;animation:notification-module_JumpIn__RkZbv .6s ease-in;border:1px solid;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;font-family:sans-serif;gap:10px;justify-content:space-between;max-width:350px;min-width:200px;opacity:1;padding:10px;position:fixed;right:20px;z-index:1000}.notification-module_notification-open__50xIb{opacity:1}.notification-module_notification-text__FdOrX{align-items:center;display:flex;gap:4px}@keyframes notification-module_JumpIn__RkZbv{0%{transform:translateX(100%)}to{transform:translateX(0)}}");const a={warn:"#FEEC37",success:"#C2FFC7",error:"#FF748B",info:"#C4D9FF"},c={success:e.jsx(o.AiOutlineCheckCircle,{}),info:e.jsx(o.AiOutlineInfoCircle,{}),warn:e.jsx(o.AiOutlineWarning,{}),error:e.jsx(o.AiOutlineCloseCircle,{})};module.exports=(l=3e3)=>{const[d,u]=t.useState([]);return{trigger:t.useCallback(((e,t="success")=>{const i=Date.now();u((o=>[...o,{id:i,text:e,type:t}])),setTimeout((()=>{u((e=>e.filter((e=>e.id!==i))))}),l+500)}),[l]),Toasts:t.useMemo((()=>0===d.length?null:e.jsx(e.Fragment,{children:d.map((({id:t,text:l,type:d="success"},p)=>{const x=a[d];return e.jsxs("section",{role:"alert",className:`${n} ${r}`,style:{top:20+50*p,backgroundColor:x,borderColor:i.colord(x).darken(.1).toHex()},children:[e.jsxs("div",{className:s,children:[c[d],l]}),e.jsx(o.AiOutlineClose,{onClick:()=>u((e=>e.filter((e=>e.id!==t)))),fill:"currentColor",style:{cursor:"pointer"}})]},t)}))})),[d])}};
//# sourceMappingURL=index.js.map