fix: polyfill old versions

trussworks · Feb 25, 2025 · f2115e8 · f2115e8
1 parent 389dfb5
commit f2115e8
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -37,6 +37,15 @@ export function isCustomProps<T>(
 const TRIANGLE_SIZE = 5
 const DEFAULT_POSITION = 'top'
 
+// useId was introduced in React 18 - polyfill for older versions
+const genId = (): string => {
+  if (React.useId) {
+    return React.useId();
+  } else {
+    return `${Math.floor(Math.random() * 900000) + 100000}`
+  }
+}
+
 export function Tooltip(props: DefaultTooltipProps): ReactElement
 export function Tooltip<T>(props: CustomTooltipProps<T>): ReactElement
 export function Tooltip<
@@ -49,7 +58,7 @@ export function Tooltip<
 }: DefaultTooltipProps | CustomTooltipProps<FCProps>): ReactElement {
   const triggerElementRef = useRef<HTMLElement & HTMLButtonElement>(null)
   const tooltipBodyRef = useRef<HTMLElement>(null)
-  const tooltipID = `tooltip-${useId()}`
+  const tooltipID = useRef(`tooltip-${genId()}`)
 
   const [isVisible, setVisible] = useState(false)
   const [isShown, setIsShown] = useState(false)