toasty-reactx/dist/index.js

A lightweight, customizable toast notification system for React applications.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react-redux"),s=require("react"),o=require("@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 r=(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}),a=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"}}},i=t=>{switch(t.type){case"success":return"toast-success";case"error":return"toast-error";case"info":return"toast-info";default:return""}},n=({toast:e,onRemove:o})=>{const[r,a]=s.useState(!1);return s.useEffect((()=>{const t=setTimeout((()=>{a(!0)}),10);return()=>{clearTimeout(t)}}),[]),t.jsx("div",{className:`toast ${i(e)} ${r?"toast-visible":""} ${e.className||""}`,style:e.style,onClick:()=>o(e.id),children:t.jsx("div",{className:"toast-message",children:e.message})})},c=o.createSlice({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:d,removeToast:l,dismissAllToasts:u}=c.actions;var m=c.reducer;const p=()=>{const t=e.useDispatch(),o=e.useSelector((t=>t.toast.toasts)),a=s.useCallback(((e,s)=>{const o=r(e,s);return t(d(o)),o.duration&&setTimeout((()=>{t(l(o.id))}),o.duration),o.id}),[t]),i=s.useCallback(((t,e)=>a(t,{...e,type:"success"})),[a]),n=s.useCallback(((t,e)=>a(t,{...e,type:"error"})),[a]),c=s.useCallback(((t,e)=>a(t,{...e,type:"info"})),[a]),m=s.useCallback((e=>{setTimeout((()=>{t(l(e))}),300)}),[t]),p=s.useCallback((()=>{setTimeout((()=>{t(u())}),300)}),[t]);return{toasts:o,toast:a,success:i,error:n,info:c,dismiss:m,dismissAll:p}},f=o.configureStore({reducer:{toast:m}});exports.ToastContainer=()=>{const s=e.useSelector((t=>t.toast.toasts)),{dismiss:o}=p(),r=s.reduce(((t,e)=>{const s=e.position;return t[s]||(t[s]=[]),t[s].push(e),t}),{});return t.jsx(t.Fragment,{children:Object.entries(r).map((([e,s])=>t.jsx("div",{className:"toast-container",style:a(e),children:s.map((e=>t.jsx(n,{toast:e,onRemove:o},e.id)))},e)))})},exports.ToastProvider=({children:s})=>t.jsx(e.Provider,{store:f,children:s}),exports.useToast=p;
//# sourceMappingURL=index.js.map