Merge pull request #144 from keemsebin/feature#140

Feature#140

src/components/toast/ToasterWithMax.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import toast, { Toaster, useToasterStore } from 'react-hot-toast';
+
+export default function ToasterWithMax() {
+  const { toasts } = useToasterStore();
+  const [toastLimit, setToastLimit] = useState<number>(2);
+
+  useEffect(() => {
+    toasts
+      .filter((t) => t.visible)
+      .filter((_, i) => i >= toastLimit)
+      .forEach((t) => toast.dismiss(t.id));
+  }, [toasts, toastLimit]);
+
+  return (
+    <>
+      <Toaster
+        containerStyle={{
+          position: 'fixed',
+          maxHeight: '0.5rem',
+        }}
+        toastOptions={{
+          style: {
+            fontWeight: 600,
+            padding: '0.5rem',
+          },
+        }}
+      />
+    </>
+  );
+}

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import { Analytics } from '@vercel/analytics/react';
 import { CookiesProvider } from 'react-cookie';
 import { Toaster } from 'react-hot-toast';
 import Layout from '@/components/layout';
+import ToasterWithMax from '@/components/toast/ToasterWithMax';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -42,20 +43,7 @@ export default function App({ Component, pageProps }: AppProps) {
         </QueryClientProvider>
       </CookiesProvider>
 
-      <Toaster
-        containerStyle={{
-          position: 'fixed',
-          overflow: 'hidden',
-          maxHeight: '5rem',
-        }}
-        toastOptions={{
-          style: {
-            fontWeight: 600,
-            padding: '0.75rem 1rem',
-            marginTop: '0.5rem',
-          },
-        }}
-      />
+      <ToasterWithMax />
     </>
   );
 }