ndd-react
Version:
A lightweight, customizable toast notification library for React applications
3 lines (2 loc) • 4.41 kB
JavaScript
import e,{createContext as t,useReducer as r,useCallback as a,useContext as n,useRef as o,useEffect as s}from"react";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l.apply(null,arguments)}const i={toasts:[]},c=t(null);function m(e,t){switch(t.type){case"ADD_TOAST":return l({},e,{toasts:[...e.toasts,t.toast]});case"REMOVE_TOAST":return l({},e,{toasts:e.toasts.filter(e=>e.id!==t.id)});default:return e}}const u=({children:t})=>{const[n,o]=r(m,i),s=a(e=>{const t=Math.random().toString(36).substr(2,9);o({type:"ADD_TOAST",toast:l({},e,{id:t})}),Infinity!==e.duration&&setTimeout(()=>{o({type:"REMOVE_TOAST",id:t})},e.duration||3e3)},[]),u=a(e=>{o({type:"REMOVE_TOAST",id:e})},[]);return e.createElement(c.Provider,{value:{state:n,addToast:s,removeToast:u}},t)},d=()=>{const e=n(c);if(!e)throw new Error("useToast must be used within a ToastProvider");return e},v={success:e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},e.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})),error:e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},e.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})),warning:e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},e.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"})),info:e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor"},e.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z",clipRule:"evenodd"}))},p={success:"Success!",error:"Error!",warning:"Warning!",info:"Information"},w=({id:t,message:r,type:a="info",position:n="top-right",onRemove:l})=>{const i=o(null),c=o(null);return s(()=>{const e=setTimeout(()=>{c.current&&(c.current.style.animation="none"),i.current&&(i.current.classList.remove("toast-enter"),i.current.classList.add("toast-exit")),setTimeout(()=>l(t),300)},3500);return()=>clearTimeout(e)},[t,l]),e.createElement("div",{ref:i,className:`toast toast-${a} toast-enter`,id:`toast-${t}`},e.createElement("div",{ref:c,className:`progress-bar progress-${a}`}),e.createElement("div",{className:"toast-content"},e.createElement("div",{className:`icon-circle icon-${a}`},e.createElement("div",{className:"icon-core"},v[a])),e.createElement("div",{className:"toast-text"},e.createElement("h3",{className:"toast-title"},p[a]),e.createElement("p",{className:"toast-message"},r)),e.createElement("button",{onClick:e=>{e.stopPropagation(),c.current&&(c.current.style.animation="none"),i.current&&(i.current.classList.remove("toast-enter"),i.current.classList.add("toast-exit")),setTimeout(()=>l(t),300)},className:"toast-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},e.createElement("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})))))},g=()=>{const{state:t,removeToast:r}=d();return e.createElement(e.Fragment,null,Array.from(new Set(t.toasts.map(e=>e.position||"top-right"))).map(a=>e.createElement("div",{key:a,className:`toast-container ${a}`},(e=>t.toasts.filter(t=>(t.position||"top-right")===e))(a).map(t=>e.createElement(w,l({key:t.id},t,{onRemove:r}))))))};export{g as ToastContainer,u as ToastProvider,d as useToast};
//# sourceMappingURL=index.modern.js.map