feat: portal logic

mvriu5 · Aug 12, 2024 · a5ac790 · a5ac790
1 parent 31aebe2
commit a5ac790
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "griller",
   "license": "MIT",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "private": false,
   "repository": {
     "url": "https://github.com/mvriu5/griller"

diff --git a/src/component/toast.tsx b/src/component/toast.tsx
@@ -5,7 +5,6 @@ import {X} from "lucide-react";
 import {AnimatePresence, motion} from "framer-motion";
 import clsx, {ClassValue} from "clsx";
 import {twMerge} from "tailwind-merge";
-import ReactDOM from "react-dom";
 
 export const cn = (...classes: ClassValue[]) => twMerge(clsx(classes));
 
@@ -22,10 +21,6 @@ export const positionClasses = (position: Position) => {
     return '';
 }
 
-const ToastPortal: React.FC<{ children: ReactNode }> = ({ children }) => {
-    return ReactDOM.createPortal(children, document.body);
-}
-
 interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     id: string;
     title: string;
@@ -108,7 +103,6 @@ const Toast: React.FC<ToastProps & {
     };
 
     return (
-        <ToastPortal>
             <AnimatePresence onExitComplete={() => removeToast(id)}>
                 {visible && (
                     <motion.div
@@ -177,7 +171,6 @@ const Toast: React.FC<ToastProps & {
                     </motion.div>
                 )}
             </AnimatePresence>
-        </ToastPortal>
     );
 };
 

diff --git a/src/component/toaster.tsx b/src/component/toaster.tsx
@@ -3,6 +3,7 @@
 import React, {createContext, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {Position, positionClasses, Toast, ToastProps} from './toast';
 import {AnimatePresence, motion} from "framer-motion";
+import { ToastPortal } from './toastportal';
 
 interface ToastContextType {
     addToast: (props: Omit<ToastProps, 'id'>) => string;
@@ -84,37 +85,39 @@ export const Toaster: React.FC<ToasterProps> = ({ children, layout = "stack" })
     return (
         <ToastContext.Provider value={{ addToast, removeToast }}>
             {children}
-            {Object.entries(groupedToasts).map(([position, positionToasts]) => (
-                <motion.div
-                    key={position}
-                    className={`fixed z-50 flex flex-col ${positionClasses(position as Position)}`}
-                    variants={containerVariants}
-                    initial="initial"
-                    whileHover="hover"
-                    whileTap="hover"
-                    onMouseEnter={() => setIsPaused(true)}
-                    onMouseLeave={() => setIsPaused(false)}
-                >
-                    <AnimatePresence>
-                        {positionToasts.map((toast) => {
-                            return(
-                                <motion.div
-                                    key={toast.id}
-                                    layout
-                                    variants={layout === "stack" ? childStackVariants : childExpandVariants}
-                                    custom={position as Position}
-                                >
-                                    <Toast key={toast.id}
-                                           removeToast={removeToast}
-                                           isPaused={isPaused}
-                                           {...toast}
-                                    />
-                                </motion.div>
-                            )
-                        })}
-                    </AnimatePresence>
-                </motion.div>
-            ))}
+            <ToastPortal>
+                {Object.entries(groupedToasts).map(([position, positionToasts]) => (
+                    <motion.div
+                        key={position}
+                        className={`fixed z-50 flex flex-col ${positionClasses(position as Position)}`}
+                        variants={containerVariants}
+                        initial="initial"
+                        whileHover="hover"
+                        whileTap="hover"
+                        onMouseEnter={() => setIsPaused(true)}
+                        onMouseLeave={() => setIsPaused(false)}
+                    >
+                        <AnimatePresence>
+                            {positionToasts.map((toast) => {
+                                return(
+                                    <motion.div
+                                        key={toast.id}
+                                        layout
+                                        variants={layout === "stack" ? childStackVariants : childExpandVariants}
+                                        custom={position as Position}
+                                    >
+                                        <Toast key={toast.id}
+                                               removeToast={removeToast}
+                                               isPaused={isPaused}
+                                               {...toast}
+                                        />
+                                    </motion.div>
+                                )
+                            })}
+                        </AnimatePresence>
+                    </motion.div>
+                ))}
+            </ToastPortal>
         </ToastContext.Provider>
     );
 };

diff --git a/src/component/toastportal.tsx b/src/component/toastportal.tsx
@@ -0,0 +1,30 @@
+import ReactDOM from 'react-dom';
+import React, {ReactNode, useEffect, useState} from 'react';
+
+interface ToastPortalProps {
+    children: ReactNode;
+}
+
+export const ToastPortal: React.FC<ToastPortalProps> = ({ children }) => {
+    const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        let element = document.getElementById('toast-portal-root');
+        if (!element) {
+            element = document.createElement('div');
+            element.id = 'toast-portal-root';
+            document.body.appendChild(element);
+        }
+        setPortalElement(element);
+
+        return () => {
+            if (element && element.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+        };
+    }, []);
+
+    if (!portalElement) return null;
+
+    return ReactDOM.createPortal(children, portalElement);
+};