toasty-reactx/dist/index.esm.js

A lightweight, customizable toast notification system for React applications.

import{jsx as t,Fragment as e}from"react/jsx-runtime";import{useDispatch as s,useSelector as o,Provider as r}from"react-redux";import{useState as a,useEffect as i,useCallback as n}from"react";import{createSlice as d,configureStore as c}from"@reduxjs/toolkit";!function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===s&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}(".toast-container{flex-direction:column;gap:10px;pointer-events:none;position:fixed;width:max-content;z-index:9999}.toast,.toast-container{display:flex;max-width:350px}.toast{align-items:center;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#222;cursor:pointer;font-size:14px;line-height:1.5;min-width:200px;overflow:hidden;padding:12px 16px;pointer-events:auto;position:relative;transition:transform .3s ease,opacity .3s ease}.toast-visible{opacity:1;transform:translateY(0)}.toast-success{border-left:4px solid #10b981}.toast-error{border-left:4px solid #ef4444}.toast-info{border-left:4px solid #f59e0b}.toast-message{flex:1;word-break:break-word}@media (max-width:600px){.toast,.toast-container{max-width:90vw}}",{insertAt:"top"});const m=(t,e)=>({id:Math.random().toString(36).substring(2,9),message:t,type:e?.type||"success",createdAt:Date.now(),visible:!0,position:e?.position||"bottom-center",duration:e?.duration||3e3,style:e?.style,className:e?.className}),l=t=>{switch(t){case"top-left":return{top:"1rem",left:"1rem"};case"top-center":return{top:"1rem",left:"50%",transform:"translateX(-50%)"};case"top-right":return{top:"1rem",right:"1rem"};case"bottom-left":return{bottom:"1rem",left:"1rem"};case"bottom-center":return{bottom:"1rem",left:"50%",transform:"translateX(-50%)"};default:return{bottom:"1rem",right:"1rem"}}},p=t=>{switch(t.type){case"success":return"toast-success";case"error":return"toast-error";case"info":return"toast-info";default:return""}},u=({toast:e,onRemove:s})=>{const[o,r]=a(!1);return i((()=>{const t=setTimeout((()=>{r(!0)}),10);return()=>{clearTimeout(t)}}),[]),t("div",{className:`toast ${p(e)} ${o?"toast-visible":""} ${e.className||""}`,style:e.style,onClick:()=>s(e.id),children:t("div",{className:"toast-message",children:e.message})})},f=d({name:"toast",initialState:{toasts:[]},reducers:{addToast:(t,e)=>{t.toasts.push(e.payload)},removeToast:(t,e)=>{t.toasts=t.toasts.filter((t=>t.id!==e.payload))},dismissAllToasts:t=>{t.toasts=[]}}}),{addToast:h,removeToast:x,dismissAllToasts:b}=f.actions;var y=f.reducer;const v=()=>{const t=s(),e=o((t=>t.toast.toasts)),r=n(((e,s)=>{const o=m(e,s);return t(h(o)),o.duration&&setTimeout((()=>{t(x(o.id))}),o.duration),o.id}),[t]),a=n(((t,e)=>r(t,{...e,type:"success"})),[r]),i=n(((t,e)=>r(t,{...e,type:"error"})),[r]),d=n(((t,e)=>r(t,{...e,type:"info"})),[r]),c=n((e=>{setTimeout((()=>{t(x(e))}),300)}),[t]),l=n((()=>{setTimeout((()=>{t(b())}),300)}),[t]);return{toasts:e,toast:r,success:a,error:i,info:d,dismiss:c,dismissAll:l}},g=()=>{const s=o((t=>t.toast.toasts)),{dismiss:r}=v(),a=s.reduce(((t,e)=>{const s=e.position;return t[s]||(t[s]=[]),t[s].push(e),t}),{});return t(e,{children:Object.entries(a).map((([e,s])=>t("div",{className:"toast-container",style:l(e),children:s.map((e=>t(u,{toast:e,onRemove:r},e.id)))},e)))})},T=c({reducer:{toast:y}}),w=({children:e})=>t(r,{store:T,children:e});export{g as ToastContainer,w as ToastProvider,v as useToast};
//# sourceMappingURL=index.esm.js.map