From 687741d82c7d0f85aed2e7ae59bb6a7b1ef8841d Mon Sep 17 00:00:00 2001
From: Arthur Baileys Li <arthurlitovko@gmail.com>
Date: Mon, 11 Nov 2024 17:18:07 +0200
Subject: [PATCH] fix(hydration): use `useId` for dom variant

---
 package.json    | 2 +-
 src/web/Svg.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index bd2a31c..5b5bebc 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "typescript": "5.4.2"
   },
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=18.0.0"
   },
   "husky": {
     "hooks": {
diff --git a/src/web/Svg.tsx b/src/web/Svg.tsx
index 749fd0c..115a2e3 100644
--- a/src/web/Svg.tsx
+++ b/src/web/Svg.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import uid from '../shared/uid'
 import { IContentLoaderProps } from './'
 
 const SVG: React.FC<IContentLoaderProps> = ({
@@ -20,7 +19,8 @@ const SVG: React.FC<IContentLoaderProps> = ({
   beforeMask = null,
   ...props
 }) => {
-  const fixedId = uniqueKey || uid()
+  let fixedId = React.useId()
+  if (uniqueKey) fixedId = uniqueKey
   const idClip = `${fixedId}-diff`
   const idGradient = `${fixedId}-animated-diff`
   const idAria = `${fixedId}-aria`