add useRootPortal to Modal

utils/vara-ui/src/components/modal/modal.tsx

@@ -1,8 +1,8 @@
-import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import { ReactNode, useState, MouseEvent, useCallback } from 'react';
 import cx from 'clsx';
 
 import CrossSVG from '../../assets/images/cross.svg?react';
+import { useRootPortal } from '../../hooks';
 import { Button } from '../button';
 import styles from './modal.module.scss';
 
@@ -38,27 +38,16 @@ function useMaxHeight() {
 }
 
 const Modal = ({ heading, close, children, className, headerAddon, footer, maxWidth = 'small' }: Props) => {
-  const [root, setRoot] = useState<HTMLDivElement>();
   const { bodyStyle, modalRef, bodyRef } = useMaxHeight();
 
   const handleOverlayClick = ({ target, currentTarget }: MouseEvent) => {
     if (target === currentTarget) close();
   };
 
-  useEffect(() => {
-    const div = document.createElement('div');
-    div.id = 'modal-root';
-    document.body.appendChild(div);
-    setRoot(div);
-
-    return () => {
-      document.body.removeChild(div);
-    };
-  }, []);
-
   const isCustomMaxWidth = !['small', 'medium', 'large'].includes(maxWidth);
 
-  const component = (
+  return useRootPortal(
+    'modal-root',
     <div className={styles.overlay} onClick={handleOverlayClick}>
       <div
         className={cx(styles.modal, !isCustomMaxWidth && styles[maxWidth])}
@@ -81,10 +70,8 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
 
         {footer && <footer className={styles.footer}>{footer}</footer>}
       </div>
-    </div>
+    </div>,
   );
-
-  return root ? createPortal(component, root) : null;
 };
 
 export { Modal };