react-hot-toast - npm Package Compare versions

Comparing version 2.5.1 to 2.6.0-beta.0

dist/index.d.ts

@@ -18,2 +18,3 @@ import * as react from 'react';
     id: string;
+    toasterId?: string;
     message: ValueOrFunction<Renderable, Toast>;
@@ -37,3 +38,3 @@ icon?: Renderable;
 }
-type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'removeDelay'>>;
+type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'toasterId' | 'removeDelay'>>;
 type DefaultToastOptions = ToastOptions & {
@@ -49,2 +50,3 @@ [key in ToastType]?: ToastOptions;
     containerClassName?: string;
+    toasterId?: string;
     children?: (toast: Toast) => JSX.Element;
@@ -61,4 +63,6 @@ }
     custom: ToastHandler;
-    dismiss(toastId?: string): void;
-    remove(toastId?: string): void;
+    dismiss(toastId?: string, toasterId?: string): void;
+    dismissAll(toasterId?: string): void;
+    remove(toastId?: string, toasterId?: string): void;
+    removeAll(toasterId?: string): void;
     promise<T>(promise: Promise<T> | (() => Promise<T>), msgs: {
@@ -71,3 +75,3 @@ loading: Renderable;
 
-declare const useToaster: (toastOptions?: DefaultToastOptions) => {
+declare const useToaster: (toastOptions?: DefaultToastOptions, toasterId?: string) => {
     toasts: Toast[];
@@ -86,7 +90,11 @@ handlers: {
 
-interface State {
+interface ToasterSettings {
+    toastLimit: number;
+}
+interface ToasterState {
     toasts: Toast[];
+    settings: ToasterSettings;
     pausedAt: number | undefined;
 }
-declare const useStore: (toastOptions?: DefaultToastOptions) => State;
+declare const useStore: (toastOptions?: DefaultToastOptions, toasterId?: string) => ToasterState;
 
@@ -93,0 +101,0 @@ interface ToastBarProps {

dist/index.js

 "use client";
-"use strict";var X=Object.create;var R=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)R(e,o,{get:t[o],enumerable:!0})},H=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!K.call(e,s)&&s!==o&&R(e,s,{get:()=>t[s],enumerable:!(a=Y(t,s))||a.enumerable});return e};var W=(e,t,o)=>(o=e!=null?X(G(e)):{},H(t||!e||!e.__esModule?R(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>H(R({},"__esModule",{value:!0}),e);var Ve={};Z(Ve,{CheckmarkIcon:()=>F,ErrorIcon:()=>w,LoaderIcon:()=>C,ToastBar:()=>$,ToastIcon:()=>U,Toaster:()=>Q,default:()=>ke,resolveValue:()=>u,toast:()=>n,useToaster:()=>_,useToasterStore:()=>V});module.exports=ee(Ve);var te=e=>typeof e=="function",u=(e,t)=>te(e)?e(t):e;var j=(()=>{let e=0;return()=>(++e).toString()})(),D=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var k=require("react"),oe=20;var J=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,oe)};case 1:return{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return J(e,{type:e.toasts.find(r=>r.id===o.id)?1:0,toast:o});case 3:let{toastId:a}=t;return{...e,toasts:e.toasts.map(r=>r.id===a||a===void 0?{...r,dismissed:!0,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let s=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+s}))}}},O=[],I={toasts:[],pausedAt:void 0},l=e=>{I=J(I,e),O.forEach(t=>{t(I)})},re={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},V=(e={})=>{let[t,o]=(0,k.useState)(I);(0,k.useEffect)(()=>(O.push(o),()=>{let s=O.indexOf(o);s>-1&&O.splice(s,1)}),[t]);let a=t.toasts.map(s=>{var r,c,i;return{...e,...e[s.type],...s,removeDelay:s.removeDelay||((r=e[s.type])==null?void 0:r.removeDelay)||(e==null?void 0:e.removeDelay),duration:s.duration||((c=e[s.type])==null?void 0:c.duration)||(e==null?void 0:e.duration)||re[s.type],style:{...e.style,...(i=e[s.type])==null?void 0:i.style,...s.style}}});return{...t,toasts:a}};var ae=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||j()}),A=e=>(t,o)=>{let a=ae(t,e,o);return l({type:2,toast:a}),a.id},n=(e,t)=>A("blank")(e,t);n.error=A("error");n.success=A("success");n.loading=A("loading");n.custom=A("custom");n.dismiss=e=>{l({type:3,toastId:e})};n.remove=e=>l({type:4,toastId:e});n.promise=(e,t,o)=>{let a=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return typeof e=="function"&&(e=e()),e.then(s=>{let r=t.success?u(t.success,s):void 0;return r?n.success(r,{id:a,...o,...o==null?void 0:o.success}):n.dismiss(a),s}).catch(s=>{let r=t.error?u(t.error,s):void 0;r?n.error(r,{id:a,...o,...o==null?void 0:o.error}):n.dismiss(a)}),e};var h=require("react");var ie=(e,t)=>{l({type:1,toast:{id:e,height:t}})},ne=()=>{l({type:5,time:Date.now()})},P=new Map,ce=1e3,pe=(e,t=ce)=>{if(P.has(e))return;let o=setTimeout(()=>{P.delete(e),l({type:4,toastId:e})},t);P.set(e,o)},_=e=>{let{toasts:t,pausedAt:o}=V(e);(0,h.useEffect)(()=>{if(o)return;let r=Date.now(),c=t.map(i=>{if(i.duration===1/0)return;let d=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(d<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),d)});return()=>{c.forEach(i=>i&&clearTimeout(i))}},[t,o]);let a=(0,h.useCallback)(()=>{o&&l({type:6,time:Date.now()})},[o]),s=(0,h.useCallback)((r,c)=>{let{reverseOrder:i=!1,gutter:d=8,defaultPosition:p}=c||{},g=t.filter(m=>(m.position||p)===(r.position||p)&&m.height),z=g.findIndex(m=>m.id===r.id),E=g.filter((m,B)=>B<z&&m.visible).length;return g.filter(m=>m.visible).slice(...i?[E+1]:[0,E]).reduce((m,B)=>m+(B.height||0)+d,0)},[t]);return(0,h.useEffect)(()=>{t.forEach(r=>{if(r.dismissed)pe(r.id,r.removeDelay);else{let c=P.get(r.id);c&&(clearTimeout(c),P.delete(r.id))}})},[t]),{toasts:t,handlers:{updateHeight:ie,startPause:ne,endPause:a,calculateOffset:s}}};var f=W(require("react")),S=require("goober");var y=W(require("react")),b=require("goober");var x=require("goober"),de=x.keyframes`
+"use strict";var se=Object.create;var I=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var pe=(e,t)=>{for(var o in t)I(e,o,{get:t[o],enumerable:!0})},q=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of ie(t))!ce.call(e,a)&&a!==o&&I(e,a,{get:()=>t[a],enumerable:!(r=ae(t,a))||r.enumerable});return e};var j=(e,t,o)=>(o=e!=null?se(ne(e)):{},q(t||!e||!e.__esModule?I(o,"default",{value:e,enumerable:!0}):o,e)),de=e=>q(I({},"__esModule",{value:!0}),e);var Ue={};pe(Ue,{CheckmarkIcon:()=>U,ErrorIcon:()=>C,LoaderIcon:()=>L,ToastBar:()=>N,ToastIcon:()=>$,Toaster:()=>oe,default:()=>Le,resolveValue:()=>f,toast:()=>n,useToaster:()=>M,useToasterStore:()=>w});module.exports=de(Ue);var me=e=>typeof e=="function",f=(e,t)=>me(e)?e(t):e;var G=(()=>{let e=0;return()=>(++e).toString()})(),k=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var V=require("react");var le=20,X="default";var K=(e,t)=>{let{toastLimit:o}=e.settings;switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,o)};case 1:return{...e,toasts:e.toasts.map(s=>s.id===t.toast.id?{...s,...t.toast}:s)};case 2:let{toast:r}=t;return K(e,{type:e.toasts.find(s=>s.id===r.id)?1:0,toast:r});case 3:let{toastId:a}=t;return{...e,toasts:e.toasts.map(s=>s.id===a||a===void 0?{...s,dismissed:!0,visible:!1}:s)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(s=>s.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let i=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(s=>({...s,pauseDuration:s.pauseDuration+i}))}}},_=[],Z={toasts:[],pausedAt:void 0,settings:{toastLimit:le}},x={},ee=(e,t=X)=>{x[t]=K(x[t]||Z,e),_.forEach(([o,r])=>{o===t&&r(x[t])})},Y=e=>Object.keys(x).forEach(t=>ee(e,t)),te=e=>Object.keys(x).find(t=>x[t].toasts.some(o=>o.id===e)),A=(e=X)=>t=>{ee(t,e)},ue={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},w=(e={},t=X)=>{let[o,r]=(0,V.useState)(x[t]||Z);(0,V.useEffect)(()=>(_.push([t,r]),()=>{let i=_.findIndex(([s])=>s===t);i>-1&&_.splice(i,1)}),[t]);let a=o.toasts.map(i=>{var s,T,g;return{...e,...e[i.type],...i,removeDelay:i.removeDelay||((s=e[i.type])==null?void 0:s.removeDelay)||(e==null?void 0:e.removeDelay),duration:i.duration||((T=e[i.type])==null?void 0:T.duration)||(e==null?void 0:e.duration)||ue[i.type],style:{...e.style,...(g=e[i.type])==null?void 0:g.style,...i.style}}});return{...o,toasts:a}};var fe=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||G()}),D=e=>(t,o)=>{let r=fe(t,e,o);return A(r.toasterId||te(r.id))({type:2,toast:r}),r.id},n=(e,t)=>D("blank")(e,t);n.error=D("error");n.success=D("success");n.loading=D("loading");n.custom=D("custom");n.dismiss=(e,t)=>{let o={type:3,toastId:e};t?A(t)(o):Y(o)};n.dismissAll=e=>n.dismiss(void 0,e);n.remove=(e,t)=>{let o={type:4,toastId:e};t?(A(t)(o),console.log("dispatch",o,t)):(console.log("dispatchAll",o),Y(o))};n.removeAll=e=>n.remove(void 0,e);n.promise=(e,t,o)=>{let r=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let i=t.success?f(t.success,a):void 0;return i?n.success(i,{id:r,...o,...o==null?void 0:o.success}):n.dismiss(r),a}).catch(a=>{let i=t.error?f(t.error,a):void 0;i?n.error(i,{id:r,...o,...o==null?void 0:o.error}):n.dismiss(r)}),e};var l=require("react");var ye=1e3,M=(e,t="default")=>{let{toasts:o,pausedAt:r}=w(e,t),a=(0,l.useRef)(new Map).current,i=(0,l.useCallback)((c,m=ye)=>{if(a.has(c))return;let p=setTimeout(()=>{a.delete(c),s({type:4,toastId:c})},m);a.set(c,p)},[]);(0,l.useEffect)(()=>{if(r)return;let c=Date.now(),m=o.map(p=>{if(p.duration===1/0)return;let O=(p.duration||0)+p.pauseDuration-(c-p.createdAt);if(O<0){p.visible&&n.dismiss(p.id);return}return setTimeout(()=>n.dismiss(p.id,t),O)});return()=>{m.forEach(p=>p&&clearTimeout(p))}},[o,r,t]);let s=(0,l.useCallback)(A(t),[t]),T=(0,l.useCallback)(()=>{s({type:5,time:Date.now()})},[s]),g=(0,l.useCallback)((c,m)=>{s({type:1,toast:{id:c,height:m}})},[s]),b=(0,l.useCallback)(()=>{r&&s({type:6,time:Date.now()})},[r,s]),d=(0,l.useCallback)((c,m)=>{let{reverseOrder:p=!1,gutter:O=8,defaultPosition:J}=m||{},W=o.filter(u=>(u.position||J)===(c.position||J)&&u.height),re=W.findIndex(u=>u.id===c.id),Q=W.filter((u,H)=>H<re&&u.visible).length;return W.filter(u=>u.visible).slice(...p?[Q+1]:[0,Q]).reduce((u,H)=>u+(H.height||0)+O,0)},[o]);return(0,l.useEffect)(()=>{o.forEach(c=>{if(c.dismissed)i(c.id,c.removeDelay);else{let m=a.get(c.id);m&&(clearTimeout(m),a.delete(c.id))}})},[o,i]),{toasts:o,handlers:{updateHeight:g,startPause:T,endPause:b,calculateOffset:d}}};var y=j(require("react")),v=require("goober");var S=j(require("react")),E=require("goober");var P=require("goober"),ge=P.keyframes`
 from {
@@ -10,3 +10,3 @@ transform: scale(0) rotate(45deg);
   opacity: 1;
-}`,me=x.keyframes`
+}`,he=P.keyframes`
 from {
@@ -19,3 +19,3 @@ transform: scale(0);
   opacity: 1;
-}`,ue=x.keyframes`
+}`,xe=P.keyframes`
 from {
@@ -28,3 +28,3 @@ transform: scale(0) rotate(90deg);
 	opacity: 1;
-}`,w=(0,x.styled)("div")`
+}`,C=(0,P.styled)("div")`
   width: 20px;
@@ -38,3 +38,3 @@ opacity: 0;
 
-  animation: ${de} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  animation: ${ge} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
     forwards;
@@ -46,3 +46,3 @@ animation-delay: 100ms;
     content: '';
-    animation: ${me} 0.15s ease-out forwards;
+    animation: ${he} 0.15s ease-out forwards;
     animation-delay: 150ms;
@@ -60,7 +60,7 @@ position: absolute;
   &:before {
-    animation: ${ue} 0.15s ease-out forwards;
+    animation: ${xe} 0.15s ease-out forwards;
     animation-delay: 180ms;
     transform: rotate(90deg);
   }
-`;var M=require("goober"),le=M.keyframes`
+`;var F=require("goober"),Se=F.keyframes`
   from {
@@ -72,3 +72,3 @@ transform: rotate(0deg);
   }
-`,C=(0,M.styled)("div")`
+`,L=(0,F.styled)("div")`
   width: 12px;
@@ -81,4 +81,4 @@ height: 12px;
   border-right-color: ${e=>e.primary||"#616161"};
-  animation: ${le} 1s linear infinite;
-`;var v=require("goober"),fe=v.keyframes`
+  animation: ${Se} 1s linear infinite;
+`;var R=require("goober"),be=R.keyframes`
 from {
@@ -91,3 +91,3 @@ transform: scale(0) rotate(45deg);
 	opacity: 1;
-}`,Te=v.keyframes`
+}`,Ae=R.keyframes`
 0% {
@@ -106,3 +106,3 @@ height: 0;
   height: 10px;
-}`,F=(0,v.styled)("div")`
+}`,U=(0,R.styled)("div")`
   width: 20px;
@@ -116,3 +116,3 @@ opacity: 0;
 
-  animation: ${fe} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  animation: ${be} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
     forwards;
@@ -123,3 +123,3 @@ animation-delay: 100ms;
     box-sizing: border-box;
-    animation: ${Te} 0.2s ease-out forwards;
+    animation: ${Ae} 0.2s ease-out forwards;
     opacity: 0;
@@ -136,5 +136,5 @@ animation-delay: 200ms;
   }
-`;var ye=(0,b.styled)("div")`
+`;var Pe=(0,E.styled)("div")`
   position: absolute;
-`,ge=(0,b.styled)("div")`
+`,Ee=(0,E.styled)("div")`
   position: relative;
@@ -146,3 +146,3 @@ display: flex;
   min-height: 20px;
-`,he=b.keyframes`
+`,ve=E.keyframes`
 from {
@@ -155,3 +155,3 @@ transform: scale(0.6);
   opacity: 1;
-}`,xe=(0,b.styled)("div")`
+}`,De=(0,E.styled)("div")`
   position: relative;
@@ -161,11 +161,11 @@ transform: scale(0.6);
   min-width: 20px;
-  animation: ${he} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  animation: ${ve} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
     forwards;
-`,U=({toast:e})=>{let{icon:t,type:o,iconTheme:a}=e;return t!==void 0?typeof t=="string"?y.createElement(xe,null,t):t:o==="blank"?null:y.createElement(ge,null,y.createElement(C,{...a}),o!=="loading"&&y.createElement(ye,null,o==="error"?y.createElement(w,{...a}):y.createElement(F,{...a})))};var be=e=>`
+`,$=({toast:e})=>{let{icon:t,type:o,iconTheme:r}=e;return t!==void 0?typeof t=="string"?S.createElement(De,null,t):t:o==="blank"?null:S.createElement(Ee,null,S.createElement(L,{...r}),o!=="loading"&&S.createElement(Pe,null,o==="error"?S.createElement(C,{...r}):S.createElement(U,{...r})))};var Re=e=>`
 0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
 100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
-`,Se=e=>`
+`,Oe=e=>`
 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
 100% {transform: translate3d(0,${e*-150}%,-1px) scale(.6); opacity:0;}
-`,Ae="0%{opacity:0;} 100%{opacity:1;}",Pe="0%{opacity:1;} 100%{opacity:0;}",ve=(0,S.styled)("div")`
+`,Ie="0%{opacity:0;} 100%{opacity:1;}",ke="0%{opacity:1;} 100%{opacity:0;}",_e=(0,v.styled)("div")`
   display: flex;
@@ -182,3 +182,3 @@ align-items: center;
   border-radius: 8px;
-`,Ee=(0,S.styled)("div")`
+`,Ve=(0,v.styled)("div")`
   display: flex;
@@ -190,3 +190,3 @@ justify-content: center;
   white-space: pre-line;
-`,Re=(e,t)=>{let a=e.includes("top")?1:-1,[s,r]=D()?[Ae,Pe]:[be(a),Se(a)];return{animation:t?`${(0,S.keyframes)(s)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,S.keyframes)(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},$=f.memo(({toast:e,position:t,style:o,children:a})=>{let s=e.height?Re(e.position||t||"top-center",e.visible):{opacity:0},r=f.createElement(U,{toast:e}),c=f.createElement(Ee,{...e.ariaProps},u(e.message,e));return f.createElement(ve,{className:e.className,style:{...s,...o,...e.style}},typeof a=="function"?a({icon:r,message:c}):f.createElement(f.Fragment,null,r,c))});var N=require("goober"),T=W(require("react"));(0,N.setup)(T.createElement);var De=({id:e,className:t,style:o,onHeightUpdate:a,children:s})=>{let r=T.useCallback(c=>{if(c){let i=()=>{let d=c.getBoundingClientRect().height;a(e,d)};i(),new MutationObserver(i).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,a]);return T.createElement("div",{ref:r,className:t,style:o},s)},Oe=(e,t)=>{let o=e.includes("top"),a=o?{top:0}:{bottom:0},s=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:D()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...a,...s}},Ie=N.css`
+`,we=(e,t)=>{let r=e.includes("top")?1:-1,[a,i]=k()?[Ie,ke]:[Re(r),Oe(r)];return{animation:t?`${(0,v.keyframes)(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,v.keyframes)(i)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},N=y.memo(({toast:e,position:t,style:o,children:r})=>{let a=e.height?we(e.position||t||"top-center",e.visible):{opacity:0},i=y.createElement($,{toast:e}),s=y.createElement(Ve,{...e.ariaProps},f(e.message,e));return y.createElement(_e,{className:e.className,style:{...a,...o,...e.style}},typeof r=="function"?r({icon:i,message:s}):y.createElement(y.Fragment,null,i,s))});var B=require("goober"),h=j(require("react"));(0,B.setup)(h.createElement);var Me=({id:e,className:t,style:o,onHeightUpdate:r,children:a})=>{let i=h.useCallback(s=>{if(s){let T=()=>{let g=s.getBoundingClientRect().height;r(e,g)};T(),new MutationObserver(T).observe(s,{subtree:!0,childList:!0,characterData:!0})}},[e,r]);return h.createElement("div",{ref:i,className:t,style:o},a)},Ce=(e,t)=>{let o=e.includes("top"),r=o?{top:0}:{bottom:0},a=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:k()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...r,...a}},Fe=B.css`
   z-index: 9999;
@@ -196,3 +196,3 @@ > * {
   }
-`,L=16,Q=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:a,children:s,containerStyle:r,containerClassName:c})=>{let{toasts:i,handlers:d}=_(o);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:L,left:L,right:L,bottom:L,pointerEvents:"none",...r},className:c,onMouseEnter:d.startPause,onMouseLeave:d.endPause},i.map(p=>{let g=p.position||t,z=d.calculateOffset(p,{reverseOrder:e,gutter:a,defaultPosition:t}),E=Oe(g,z);return T.createElement(De,{id:p.id,key:p.id,onHeightUpdate:d.updateHeight,className:p.visible?Ie:"",style:E},p.type==="custom"?u(p.message,p):s?s(p):T.createElement($,{toast:p,position:g}))}))};var ke=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
+`,z=16,oe=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:r,children:a,toasterId:i,containerStyle:s,containerClassName:T})=>{let{toasts:g,handlers:b}=M(o,i);return h.createElement("div",{"data-rht-toaster":i||"",style:{position:"fixed",zIndex:9999,top:z,left:z,right:z,bottom:z,pointerEvents:"none",...s},className:T,onMouseEnter:b.startPause,onMouseLeave:b.endPause},g.map(d=>{let c=d.position||t,m=b.calculateOffset(d,{reverseOrder:e,gutter:r,defaultPosition:t}),p=Ce(c,m);return h.createElement(Me,{id:d.id,key:d.id,onHeightUpdate:b.updateHeight,className:d.visible?Fe:"",style:p},d.type==="custom"?f(d.message,d):a?a(d):h.createElement(N,{toast:d,position:c}))}))};var Le=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
 //# sourceMappingURL=index.js.map

headless/index.d.ts

@@ -16,2 +16,3 @@ import { CSSProperties } from 'react';
     id: string;
+    toasterId?: string;
     message: ValueOrFunction<Renderable, Toast>;
@@ -35,3 +36,3 @@ icon?: Renderable;
 }
-type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'removeDelay'>>;
+type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'toasterId' | 'removeDelay'>>;
 type DefaultToastOptions = ToastOptions & {
@@ -47,2 +48,3 @@ [key in ToastType]?: ToastOptions;
     containerClassName?: string;
+    toasterId?: string;
     children?: (toast: Toast) => JSX.Element;
@@ -59,4 +61,6 @@ }
     custom: ToastHandler;
-    dismiss(toastId?: string): void;
-    remove(toastId?: string): void;
+    dismiss(toastId?: string, toasterId?: string): void;
+    dismissAll(toasterId?: string): void;
+    remove(toastId?: string, toasterId?: string): void;
+    removeAll(toasterId?: string): void;
     promise<T>(promise: Promise<T> | (() => Promise<T>), msgs: {
@@ -69,3 +73,3 @@ loading: Renderable;
 
-declare const useToaster: (toastOptions?: DefaultToastOptions) => {
+declare const useToaster: (toastOptions?: DefaultToastOptions, toasterId?: string) => {
     toasts: Toast[];
@@ -84,8 +88,12 @@ handlers: {
 
-interface State {
+interface ToasterSettings {
+    toastLimit: number;
+}
+interface ToasterState {
     toasts: Toast[];
+    settings: ToasterSettings;
     pausedAt: number | undefined;
 }
-declare const useStore: (toastOptions?: DefaultToastOptions) => State;
+declare const useStore: (toastOptions?: DefaultToastOptions, toasterId?: string) => ToasterState;
 
 export { DefaultToastOptions, IconTheme, Renderable, Toast, ToastOptions, ToastPosition, ToastType, ToasterProps, ValueFunction, ValueOrFunction, toast as default, resolveValue, toast, useToaster, useStore as useToasterStore };

headless/index.js

@@ -1,2 +0,2 @@
-"use strict";var P=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var o in t)P(e,o,{get:t[o],enumerable:!0})},U=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!I.call(e,s)&&s!==o&&P(e,s,{get:()=>t[s],enumerable:!(n=R(t,s))||n.enumerable});return e};var F=e=>U(P({},"__esModule",{value:!0}),e);var W={};M(W,{default:()=>B,resolveValue:()=>l,toast:()=>a,useToaster:()=>x,useToasterStore:()=>g});module.exports=F(W);var w=e=>typeof e=="function",l=(e,t)=>w(e)?e(t):e;var h=(()=>{let e=0;return()=>(++e).toString()})(),z=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var A=require("react"),N=20;var V=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,N)};case 1:return{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return V(e,{type:e.toasts.find(r=>r.id===o.id)?1:0,toast:o});case 3:let{toastId:n}=t;return{...e,toasts:e.toasts.map(r=>r.id===n||n===void 0?{...r,dismissed:!0,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let s=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+s}))}}},y=[],S={toasts:[],pausedAt:void 0},c=e=>{S=V(S,e),y.forEach(t=>{t(S)})},k={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,o]=(0,A.useState)(S);(0,A.useEffect)(()=>(y.push(o),()=>{let s=y.indexOf(o);s>-1&&y.splice(s,1)}),[t]);let n=t.toasts.map(s=>{var r,T,i;return{...e,...e[s.type],...s,removeDelay:s.removeDelay||((r=e[s.type])==null?void 0:r.removeDelay)||(e==null?void 0:e.removeDelay),duration:s.duration||((T=e[s.type])==null?void 0:T.duration)||(e==null?void 0:e.duration)||k[s.type],style:{...e.style,...(i=e[s.type])==null?void 0:i.style,...s.style}}});return{...t,toasts:n}};var H=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||h()}),p=e=>(t,o)=>{let n=H(t,e,o);return c({type:2,toast:n}),n.id},a=(e,t)=>p("blank")(e,t);a.error=p("error");a.success=p("success");a.loading=p("loading");a.custom=p("custom");a.dismiss=e=>{c({type:3,toastId:e})};a.remove=e=>c({type:4,toastId:e});a.promise=(e,t,o)=>{let n=a.loading(t.loading,{...o,...o==null?void 0:o.loading});return typeof e=="function"&&(e=e()),e.then(s=>{let r=t.success?l(t.success,s):void 0;return r?a.success(r,{id:n,...o,...o==null?void 0:o.success}):a.dismiss(n),s}).catch(s=>{let r=t.error?l(t.error,s):void 0;r?a.error(r,{id:n,...o,...o==null?void 0:o.error}):a.dismiss(n)}),e};var d=require("react");var L=(e,t)=>{c({type:1,toast:{id:e,height:t}})},J=()=>{c({type:5,time:Date.now()})},m=new Map,Q=1e3,X=(e,t=Q)=>{if(m.has(e))return;let o=setTimeout(()=>{m.delete(e),c({type:4,toastId:e})},t);m.set(e,o)},x=e=>{let{toasts:t,pausedAt:o}=g(e);(0,d.useEffect)(()=>{if(o)return;let r=Date.now(),T=t.map(i=>{if(i.duration===1/0)return;let f=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(f<0){i.visible&&a.dismiss(i.id);return}return setTimeout(()=>a.dismiss(i.id),f)});return()=>{T.forEach(i=>i&&clearTimeout(i))}},[t,o]);let n=(0,d.useCallback)(()=>{o&&c({type:6,time:Date.now()})},[o]),s=(0,d.useCallback)((r,T)=>{let{reverseOrder:i=!1,gutter:f=8,defaultPosition:b}=T||{},D=t.filter(u=>(u.position||b)===(r.position||b)&&u.height),_=D.findIndex(u=>u.id===r.id),E=D.filter((u,O)=>O<_&&u.visible).length;return D.filter(u=>u.visible).slice(...i?[E+1]:[0,E]).reduce((u,O)=>u+(O.height||0)+f,0)},[t]);return(0,d.useEffect)(()=>{t.forEach(r=>{if(r.dismissed)X(r.id,r.removeDelay);else{let T=m.get(r.id);T&&(clearTimeout(T),m.delete(r.id))}})},[t]),{toasts:t,handlers:{updateHeight:L,startPause:J,endPause:n,calculateOffset:s}}};var B=a;0&&(module.exports={resolveValue,toast,useToaster,useToasterStore});
+"use strict";var P=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var X=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var s in t)P(e,s,{get:t[s],enumerable:!0})},J=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of H(t))!X.call(e,i)&&i!==s&&P(e,i,{get:()=>t[i],enumerable:!(r=C(t,i))||r.enumerable});return e};var Q=e=>J(P({},"__esModule",{value:!0}),e);var Z={};j(Z,{default:()=>K,resolveValue:()=>m,toast:()=>a,useToaster:()=>k,useToasterStore:()=>E});module.exports=Q(Z);var Y=e=>typeof e=="function",m=(e,t)=>Y(e)?e(t):e;var v=(()=>{let e=0;return()=>(++e).toString()})(),se=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var O=require("react");var B=20,x="default";var I=(e,t)=>{let{toastLimit:s}=e.settings;switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,s)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return I(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:i}=t;return{...e,toasts:e.toasts.map(o=>o.id===i||i===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let n=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+n}))}}},D=[],M={toasts:[],pausedAt:void 0,settings:{toastLimit:B}},p={},U=(e,t=x)=>{p[t]=I(p[t]||M,e),D.forEach(([s,r])=>{s===t&&r(p[t])})},_=e=>Object.keys(p).forEach(t=>U(e,t)),F=e=>Object.keys(p).find(t=>p[t].toasts.some(s=>s.id===e)),f=(e=x)=>t=>{U(t,e)},W={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},E=(e={},t=x)=>{let[s,r]=(0,O.useState)(p[t]||M);(0,O.useEffect)(()=>(D.push([t,r]),()=>{let n=D.findIndex(([o])=>o===t);n>-1&&D.splice(n,1)}),[t]);let i=s.toasts.map(n=>{var o,A,y;return{...e,...e[n.type],...n,removeDelay:n.removeDelay||((o=e[n.type])==null?void 0:o.removeDelay)||(e==null?void 0:e.removeDelay),duration:n.duration||((A=e[n.type])==null?void 0:A.duration)||(e==null?void 0:e.duration)||W[n.type],style:{...e.style,...(y=e[n.type])==null?void 0:y.style,...n.style}}});return{...s,toasts:i}};var z=(e,t="blank",s)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...s,id:(s==null?void 0:s.id)||v()}),S=e=>(t,s)=>{let r=z(t,e,s);return f(r.toasterId||F(r.id))({type:2,toast:r}),r.id},a=(e,t)=>S("blank")(e,t);a.error=S("error");a.success=S("success");a.loading=S("loading");a.custom=S("custom");a.dismiss=(e,t)=>{let s={type:3,toastId:e};t?f(t)(s):_(s)};a.dismissAll=e=>a.dismiss(void 0,e);a.remove=(e,t)=>{let s={type:4,toastId:e};t?(f(t)(s),console.log("dispatch",s,t)):(console.log("dispatchAll",s),_(s))};a.removeAll=e=>a.remove(void 0,e);a.promise=(e,t,s)=>{let r=a.loading(t.loading,{...s,...s==null?void 0:s.loading});return typeof e=="function"&&(e=e()),e.then(i=>{let n=t.success?m(t.success,i):void 0;return n?a.success(n,{id:r,...s,...s==null?void 0:s.success}):a.dismiss(r),i}).catch(i=>{let n=t.error?m(t.error,i):void 0;n?a.error(n,{id:r,...s,...s==null?void 0:s.error}):a.dismiss(r)}),e};var c=require("react");var G=1e3,k=(e,t="default")=>{let{toasts:s,pausedAt:r}=E(e,t),i=(0,c.useRef)(new Map).current,n=(0,c.useCallback)((u,d=G)=>{if(i.has(u))return;let T=setTimeout(()=>{i.delete(u),o({type:4,toastId:u})},d);i.set(u,T)},[]);(0,c.useEffect)(()=>{if(r)return;let u=Date.now(),d=s.map(T=>{if(T.duration===1/0)return;let g=(T.duration||0)+T.pauseDuration-(u-T.createdAt);if(g<0){T.visible&&a.dismiss(T.id);return}return setTimeout(()=>a.dismiss(T.id,t),g)});return()=>{d.forEach(T=>T&&clearTimeout(T))}},[s,r,t]);let o=(0,c.useCallback)(f(t),[t]),A=(0,c.useCallback)(()=>{o({type:5,time:Date.now()})},[o]),y=(0,c.useCallback)((u,d)=>{o({type:1,toast:{id:u,height:d}})},[o]),w=(0,c.useCallback)(()=>{r&&o({type:6,time:Date.now()})},[r,o]),N=(0,c.useCallback)((u,d)=>{let{reverseOrder:T=!1,gutter:g=8,defaultPosition:R}=d||{},h=s.filter(l=>(l.position||R)===(u.position||R)&&l.height),L=h.findIndex(l=>l.id===u.id),V=h.filter((l,b)=>b<L&&l.visible).length;return h.filter(l=>l.visible).slice(...T?[V+1]:[0,V]).reduce((l,b)=>l+(b.height||0)+g,0)},[s]);return(0,c.useEffect)(()=>{s.forEach(u=>{if(u.dismissed)n(u.id,u.removeDelay);else{let d=i.get(u.id);d&&(clearTimeout(d),i.delete(u.id))}})},[s,n]),{toasts:s,handlers:{updateHeight:y,startPause:A,endPause:w,calculateOffset:N}}};var K=a;0&&(module.exports={resolveValue,toast,useToaster,useToasterStore});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-hot-toast",
   "description": "Smoking hot React Notifications. Lightweight, customizable and beautiful by default.",
-  "version": "2.5.1",
+  "version": "2.6.0-beta.0",
   "author": "Timo Lins",
@@ -95,3 +95,3 @@ "license": "MIT",
   "scripts": {
-    "start": "tsup --watch",
+    "dev": "tsup --watch",
     "build": "tsup",
@@ -98,0 +98,0 @@ "test": "jest --runInBand",

src/core/store.ts

 import { useEffect, useState } from 'react';
 import { DefaultToastOptions, Toast, ToastType } from './types';
 
-const TOAST_LIMIT = 20;
+export const TOAST_EXPIRE_DISMISS_DELAY = 1000;
+export const TOAST_LIMIT = 20;
+export const DEFAULT_TOASTER_ID = 'default';
 
+interface ToasterSettings {
+  toastLimit: number;
+}
+
 export enum ActionType {
@@ -16,3 +22,3 @@ ADD_TOAST,
 
-type Action =
+export type Action =
   | {
@@ -47,8 +53,15 @@ type: ActionType.ADD_TOAST;
 
-interface State {
+interface ToasterState {
   toasts: Toast[];
+  settings: ToasterSettings;
   pausedAt: number | undefined;
 }
 
-export const reducer = (state: State, action: Action): State => {
+interface State {
+  [toasterId: string]: ToasterState;
+}
+
+export const reducer = (state: ToasterState, action: Action): ToasterState => {
+  const { toastLimit } = state.settings;
+
   switch (action.type) {
@@ -58,3 +71,3 @@ case ActionType.ADD_TOAST:
         ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+        toasts: [action.toast, ...state.toasts].slice(0, toastLimit),
       };
@@ -126,13 +139,41 @@
 
-const listeners: Array<(state: State) => void> = [];
+const listeners: Array<
+  [toasterId: string, reducer: (state: ToasterState) => void]
+> = [];
 
-let memoryState: State = { toasts: [], pausedAt: undefined };
+const defaultToasterState: ToasterState = {
+  toasts: [],
+  pausedAt: undefined,
+  settings: {
+    toastLimit: TOAST_LIMIT,
+  },
+};
+let memoryState: State = {};
 
-export const dispatch = (action: Action) => {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
+export const dispatch = (action: Action, toasterId = DEFAULT_TOASTER_ID) => {
+  memoryState[toasterId] = reducer(
+    memoryState[toasterId] || defaultToasterState,
+    action
+  );
+  listeners.forEach(([id, listener]) => {
+    if (id === toasterId) {
+      listener(memoryState[toasterId]);
+    }
   });
 };
 
+export const dispatchAll = (action: Action) =>
+  Object.keys(memoryState).forEach((toasterId) => dispatch(action, toasterId));
+
+export const getToasterIdFromToastId = (toastId: string) =>
+  Object.keys(memoryState).find((toasterId) =>
+    memoryState[toasterId].toasts.some((t) => t.id === toastId)
+  );
+
+export const createDispatch =
+  (toasterId = DEFAULT_TOASTER_ID) =>
+  (action: Action) => {
+    dispatch(action, toasterId);
+  };
+
 export const defaultTimeouts: {
@@ -148,8 +189,13 @@ [key in ToastType]: number;
 
-export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
-  const [state, setState] = useState<State>(memoryState);
+export const useStore = (
+  toastOptions: DefaultToastOptions = {},
+  toasterId: string = DEFAULT_TOASTER_ID
+): ToasterState => {
+  const [state, setState] = useState<ToasterState>(
+    memoryState[toasterId] || defaultToasterState
+  );
   useEffect(() => {
-    listeners.push(setState);
+    listeners.push([toasterId, setState]);
     return () => {
-      const index = listeners.indexOf(setState);
+      const index = listeners.findIndex(([id]) => id === toasterId);
       if (index > -1) {
@@ -159,3 +205,3 @@ listeners.splice(index, 1);
     };
-  }, [state]);
+  }, [toasterId]);
 
@@ -162,0 +208,0 @@ const mergedToasts = state.toasts.map((t) => ({

src/core/toast.ts

@@ -11,3 +11,9 @@ import {
 import { genId } from './utils';
-import { dispatch, ActionType } from './store';
+import {
+  createDispatch,
+  Action,
+  ActionType,
+  dispatchAll,
+  getToasterIdFromToastId,
+} from './store';
 
@@ -41,2 +47,7 @@ type Message = ValueOrFunction<Renderable, Toast>;
     const toast = createToast(message, type, options);
+
+    const dispatch = createDispatch(
+      toast.toasterId || getToasterIdFromToastId(toast.id)
+    );
+
     dispatch({ type: ActionType.UPSERT_TOAST, toast });
@@ -54,12 +65,51 @@ return toast.id;
 
-toast.dismiss = (toastId?: string) => {
-  dispatch({
+/**
+ * Dismisses the toast with the given id. If no id is given, dismisses all toasts.
+ * The toast will transition out and then be removed from the DOM.
+ * Applies to all toasters, except when a `toasterId` is given.
+ */
+toast.dismiss = (toastId?: string, toasterId?: string) => {
+  const action: Action = {
     type: ActionType.DISMISS_TOAST,
     toastId,
-  });
+  };
+
+  if (toasterId) {
+    createDispatch(toasterId)(action);
+  } else {
+    dispatchAll(action);
+  }
 };
 
-toast.remove = (toastId?: string) =>
-  dispatch({ type: ActionType.REMOVE_TOAST, toastId });
+/**
+ * Dismisses all toasts.
+ */
+toast.dismissAll = (toasterId?: string) => toast.dismiss(undefined, toasterId);
 
+/**
+ * Removes the toast with the given id.
+ * The toast will be removed from the DOM without any transition.
+ */
+toast.remove = (toastId?: string, toasterId?: string) => {
+  const action: Action = {
+    type: ActionType.REMOVE_TOAST,
+    toastId,
+  };
+  if (toasterId) {
+    createDispatch(toasterId)(action);
+    console.log('dispatch', action, toasterId);
+  } else {
+    console.log('dispatchAll', action);
+    dispatchAll(action);
+  }
+};
+
+/**
+ * Removes all toasts.
+ */
+toast.removeAll = (toasterId?: string) => toast.remove(undefined, toasterId);
+
+/**
+ * Create a loading toast that will automatically updates with the promise.
+ */
 toast.promise = <T>(
@@ -66,0 +116,0 @@ promise: Promise<T> | (() => Promise<T>),

src/core/types.ts

@@ -37,2 +37,3 @@ import { CSSProperties } from 'react';
   id: string;
+  toasterId?: string;
   message: ValueOrFunction<Renderable, Toast>;
@@ -71,2 +72,3 @@ icon?: Renderable;
     | 'iconTheme'
+    | 'toasterId'
     | 'removeDelay'
@@ -87,2 +89,3 @@ >
   containerClassName?: string;
+  toasterId?: string;
   children?: (toast: Toast) => JSX.Element;
@@ -89,0 +92,0 @@ }

src/core/use-toaster.ts

@@ -1,41 +0,35 @@
-import { useEffect, useCallback } from 'react';
-import { dispatch, ActionType, useStore } from './store';
+import { useEffect, useCallback, useRef } from 'react';
+import { createDispatch, ActionType, useStore, dispatch } from './store';
 import { toast } from './toast';
 import { DefaultToastOptions, Toast, ToastPosition } from './types';
 
-const updateHeight = (toastId: string, height: number) => {
-  dispatch({
-    type: ActionType.UPDATE_TOAST,
-    toast: { id: toastId, height },
-  });
-};
-const startPause = () => {
-  dispatch({
-    type: ActionType.START_PAUSE,
-    time: Date.now(),
-  });
-};
-
-const toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();
-
 export const REMOVE_DELAY = 1000;
 
-const addToRemoveQueue = (toastId: string, removeDelay = REMOVE_DELAY) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
+export const useToaster = (
+  toastOptions?: DefaultToastOptions,
+  toasterId: string = 'default'
+) => {
+  const { toasts, pausedAt } = useStore(toastOptions, toasterId);
+  const toastTimeouts = useRef(
+    new Map<Toast['id'], ReturnType<typeof setTimeout>>()
+  ).current;
 
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: ActionType.REMOVE_TOAST,
-      toastId: toastId,
-    });
-  }, removeDelay);
+  const addToRemoveQueue = useCallback(
+    (toastId: string, removeDelay = REMOVE_DELAY) => {
+      if (toastTimeouts.has(toastId)) {
+        return;
+      }
 
-  toastTimeouts.set(toastId, timeout);
-};
+      const timeout = setTimeout(() => {
+        toastTimeouts.delete(toastId);
+        dispatch({
+          type: ActionType.REMOVE_TOAST,
+          toastId: toastId,
+        });
+      }, removeDelay);
 
-export const useToaster = (toastOptions?: DefaultToastOptions) => {
-  const { toasts, pausedAt } = useStore(toastOptions);
+      toastTimeouts.set(toastId, timeout);
+    },
+    []
+  );
 
@@ -62,3 +56,3 @@ useEffect(() => {
       }
-      return setTimeout(() => toast.dismiss(t.id), durationLeft);
+      return setTimeout(() => toast.dismiss(t.id, toasterId), durationLeft);
     });
@@ -69,4 +63,23 @@
     };
-  }, [toasts, pausedAt]);
+  }, [toasts, pausedAt, toasterId]);
 
+  const dispatch = useCallback(createDispatch(toasterId), [toasterId]);
+
+  const startPause = useCallback(() => {
+    dispatch({
+      type: ActionType.START_PAUSE,
+      time: Date.now(),
+    });
+  }, [dispatch]);
+
+  const updateHeight = useCallback(
+    (toastId: string, height: number) => {
+      dispatch({
+        type: ActionType.UPDATE_TOAST,
+        toast: { id: toastId, height },
+      });
+    },
+    [dispatch]
+  );
+
   const endPause = useCallback(() => {
@@ -76,3 +89,3 @@ if (pausedAt) {
     }
-  }, [pausedAt]);
+  }, [pausedAt, dispatch]);
 
@@ -110,4 +123,4 @@ const calculateOffset = useCallback(
 
+  // Keep track of dismissed toasts and remove them after the delay
   useEffect(() => {
-    // Add dismissed toasts to remove queue
     toasts.forEach((toast) => {
@@ -125,3 +138,3 @@ if (toast.dismissed) {
     });
-  }, [toasts]);
+  }, [toasts, addToRemoveQueue]);
 
@@ -128,0 +141,0 @@ return {

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

201661

12.89%

Lines of code

1678

8.12%

Worsened metrics

Number of low quality alerts

6

100%

No dependency changes