feat: support ReactElement to InfoWindow content

Author: pyjun01

src/components/CustomMarker/index.tsx

@@ -6,7 +6,7 @@ import { CustomMarkerProps, OverlayMarker } from './type';
 import { passRef } from '../../utils/passRef';
 import { useMapContext } from '../Provider/MapProvider';
 import { useOverlayMarker } from './hooks';
-import { useEvent } from '@@hooks/useEvent';
+import { useEvent } from '../../hooks/useEvent';
 
 export const CustomMarker = forwardRef<OverlayMarker, CustomMarkerProps>(function CustomMarker(
   { children, lat, lng, draggable, preventDragOnClickable = true, onDragStart = null, onDrag = null, onDragEnd = null },

src/components/InfoWindow/index.tsx

@@ -1,11 +1,12 @@
-import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
 import { AnchorContextData, AnchorProvider } from './Context';
 import { InfoWindowProps } from './type';
 import { useMapContext } from '../../components/Provider/MapProvider';
 import { useApplyInfoWindowEvent } from '../../hooks/useApplyInfoWindowEvent';
 import { useImportLibrary } from '../../hooks/useImportLibrary';
 import { passRef } from '../../utils/passRef';
+import { createPortal } from 'react-dom';
 
 export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(function InfoWindow(
   {
@@ -33,7 +34,7 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(fu
   const mapsLib = useImportLibrary('maps');
 
   const [infoWindow, setInfoWindow] = useState<google.maps.InfoWindow | null>(null);
-
+  const fragment = useRef<HTMLDivElement>(document.createElement('div'));
   const [anchor, setAnchor] = useState<Parameters<AnchorContextData['setAnchor']>[0]>();
 
   const value = useMemo<AnchorContextData>(
@@ -50,7 +51,7 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(fu
 
     const infoWindow = new mapsLib.InfoWindow({
       ariaLabel,
-      content,
+      content: fragment.current,
       disableAutoPan,
       maxWidth,
       minWidth,
@@ -79,10 +80,6 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(fu
     }
   }, [infoWindow, anchor, open]);
 
-  useEffect(() => {
-    infoWindow?.setContent(content);
-  }, [infoWindow, content]);
-
   useEffect(() => {
     infoWindow?.setPosition(position);
   }, [infoWindow, position?.lat, position?.lng]);
@@ -107,5 +104,8 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(fu
     onZIndexChanged,
   });
 
-  return <AnchorProvider value={value}>{children}</AnchorProvider>;
+  return <AnchorProvider value={value}>
+    {createPortal(<>{content}</>, fragment.current)}
+    {children}
+  </AnchorProvider>;
 });

src/components/InfoWindow/type.ts

@@ -9,8 +9,9 @@ export interface InfoWindowEvent {
   onZIndexChanged?: (infoWindow: google.maps.InfoWindow) => void;
 }
 
-export interface InfoWindowProps extends google.maps.InfoWindowOptions, InfoWindowEvent {
+export interface InfoWindowProps extends Omit<google.maps.InfoWindowOptions, 'content'>, InfoWindowEvent {
   children?: ReactElement;
   open?: boolean;
   shouldFocus?: boolean;
+  content?: ReactElement<unknown> | string | Element | Text | null;
 }