feat: add toastLimit prop to Toaster

site/pages/docs/toaster.mdx

@@ -20,6 +20,7 @@ This component will render all toasts. Alternatively you can create own renderer
   gutter={8}
   containerClassName=""
   containerStyle={{}}
+  toastLimit={4}
   toasterId="default"
   toastOptions={{
     // Define default options
@@ -64,6 +65,10 @@ Add a custom CSS class name to toaster div. Defaults to `undefined`.
 
 Customize the style of toaster div. This can be used to change the offset of all toasts
 
+### `toastLimit` Prop
+
+Limit the number of visible toasts at any given time. When more toasts are triggered than the limit allows, new toasts will be queued and displayed once older ones are dismissed. Defaults to `20`.
+
 ### `gutter` Prop
 
 Changes the gap between each toast. Defaults to `8`.

src/components/toaster.tsx

@@ -91,8 +91,9 @@ export const Toaster: React.FC<ToasterProps> = ({
   toasterId,
   containerStyle,
   containerClassName,
+  toastLimit,
 }) => {
-  const { toasts, handlers } = useToaster(toastOptions, toasterId);
+  const { toasts, handlers } = useToaster(toastOptions, toasterId, toastLimit);
 
   return (
     <div

src/core/store.ts

@@ -172,6 +172,22 @@ export const createDispatch =
     dispatch(action, toasterId);
   };
 
+const initToaster = (toasterId: string, toastLimit: number) => {
+  if (!memoryState[toasterId]) {
+    memoryState[toasterId] = {
+      ...defaultToasterState,
+      settings: { toastLimit },
+    };
+  } else if (memoryState[toasterId].settings.toastLimit !== toastLimit) {
+    memoryState[toasterId] = {
+      ...memoryState[toasterId],
+      settings: { toastLimit },
+    };
+  }
+
+  return memoryState[toasterId];
+};
+
 export const defaultTimeouts: {
   [key in ToastType]: number;
 } = {
@@ -184,13 +200,20 @@ export const defaultTimeouts: {
 
 export const useStore = (
   toastOptions: DefaultToastOptions = {},
-  toasterId: string = DEFAULT_TOASTER_ID
+  toasterId: string = DEFAULT_TOASTER_ID,
+  toastLimit: number = TOAST_LIMIT
 ): ToasterState => {
-  const [state, setState] = useState<ToasterState>(
-    memoryState[toasterId] || defaultToasterState
-  );
+  // Initialize/sync toaster settings with toastLimit
+  const initialState = initToaster(toasterId, toastLimit);
+  const [state, setState] = useState<ToasterState>(initialState);
   const initial = useRef(memoryState[toasterId]);
 
+  // Sync toastLimit changes to state
+  useEffect(() => {
+    const updated = initToaster(toasterId, toastLimit);
+    setState(updated);
+  }, [toasterId, toastLimit]);
+
   // TODO: Switch to useSyncExternalStore when targeting React 18+
   useEffect(() => {
     if (initial.current !== memoryState[toasterId]) {

src/core/types.ts

@@ -78,6 +78,7 @@ export type DefaultToastOptions = ToastOptions & {
 };
 
 export interface ToasterProps {
+  toastLimit?: number;
   position?: ToastPosition;
   toastOptions?: DefaultToastOptions;
   reverseOrder?: boolean;

src/core/use-toaster.ts

@@ -7,9 +7,10 @@ export const REMOVE_DELAY = 1000;
 
 export const useToaster = (
   toastOptions?: DefaultToastOptions,
-  toasterId: string = 'default'
+  toasterId: string = 'default',
+  toastLimit?: number
 ) => {
-  const { toasts, pausedAt } = useStore(toastOptions, toasterId);
+  const { toasts, pausedAt } = useStore(toastOptions, toasterId, toastLimit);
   const toastTimeouts = useRef(
     new Map<Toast['id'], ReturnType<typeof setTimeout>>()
   ).current;