fix: React 18 support for tooltip modal

src/components/Portal.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import usePortalElement from '../hooks/usePortalElement'
+
+interface PortalProps {
+  children?: React.ReactNode | React.ReactNode[]
+}
+
+function Portal({ children }: PortalProps): React.ReactPortal {
+  const portal = usePortalElement()
+  const modal = document.createElement('div')
+
+  React.useLayoutEffect(() => {
+    if (!portal) return
+    portal.appendChild(modal)
+
+    return () => portal.removeChild(modal) as unknown as void
+  }, [modal, portal])
+
+  return ReactDOM.createPortal(children, modal)
+}
+
+export default Portal

src/components/Tooltip.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 
 import { useAnchor } from '../hooks/useAnchor'
 import useLatestWhen from '../hooks/useLatestWhen'
@@ -11,6 +10,7 @@ import useChartContext from '../utils/chartContext'
 import TooltipRenderer from './TooltipRenderer'
 import useRect from '../hooks/useRect'
 import { useSpring } from '../hooks/useSpring'
+import Portal from './Portal';
 
 //
 
@@ -44,7 +44,7 @@ export function defaultTooltip<TDatum>(
   }
 }
 
-export default function Tooltip<TDatum>(): React.ReactPortal | null {
+export default function Tooltip<TDatum>(): JSX.Element | null {
   const {
     focusedDatumState,
     getOptions,
@@ -63,7 +63,8 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
 
   const portalEl = usePortalElement()
 
-  const [tooltipEl, setTooltipEl] = React.useState<HTMLDivElement | null>()
+  const tooltipRef = React.useRef<HTMLDivElement | null>(null)
+  const tooltipInnerRef = React.useRef<HTMLDivElement | null>(null)
 
   const svgRect = useRect(svgRef.current, !!focusedDatum?.element)
 
@@ -103,7 +104,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
     show: !!focusedDatum,
     portalEl,
     anchorEl,
-    tooltipEl,
+    tooltipEl: tooltipInnerRef.current,
     side: ['right', 'left', 'top', 'bottom'],
   })
 
@@ -112,8 +113,6 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
 
   const { visibility, ...anchorStyle } = latestStableAnchor.style
 
-  const tooltipRef = React.useRef<HTMLDivElement | null>(null)
-
   const immediate = Number.isNaN(previousAnchor?.style.left)
 
   const tooltipXSpring = useSpring(
@@ -157,7 +156,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
   const latestFit = useLatestWhen(anchor.fit, !!anchor.fit)
 
   return show && portalEl
-    ? ReactDOM.createPortal(
+    ? (<Portal>
         <div
           ref={tooltipRef}
           style={{
@@ -167,7 +166,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
           }}
         >
           <div
-            ref={el => setTooltipEl(el)}
+            ref={() => tooltipInnerRef}
             style={{
               fontFamily: 'sans-serif',
               ...(latestFit?.startKey === 'left'
@@ -190,8 +189,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
               anchor,
             })}
           </div>
-        </div>,
-        portalEl
-      )
+        </div>
+      </Portal>)
     : null
 }

src/hooks/usePortalElement.ts

@@ -16,22 +16,22 @@ export default function usePortalElement() {
 
         element.setAttribute('id', 'react-charts-portal')
 
-        Object.assign(element.style, {
-          pointerEvents: 'none',
-          position: 'fixed',
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-          'z-index': 99999999999,
-        })
-
         document.body.append(element)
       }
 
+      Object.assign(element.style, {
+        pointerEvents: 'none',
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        'z-index': 99999999999,
+      })
+
       setPortalEl(element)
     }
-  })
+  }, [])
 
   return portalEl
 }