UseId hook for maskIDs

package.json

@@ -72,12 +72,12 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.10.2",
+    "react": "^18.2.0",
     "react-app-polyfill": "^1.0.4",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dev-utils": "^9.1.0",
-    "react-dom": "^16.10.2",
+    "react-dom": "^18.2.0",
     "resolve": "1.12.0",
     "resolve-url-loader": "3.1.0",
     "sass-loader": "7.2.0",

src/lib/components/avatar-bauhaus.js

@@ -21,6 +21,7 @@ function generateColors(name, colors) {
 
 const AvatarBauhaus = (props) => {
   const properties = generateColors(props.name, props.colors);
+  const maskID = React.useId();
 
   return (
     <svg
@@ -32,10 +33,10 @@ const AvatarBauhaus = (props) => {
       height={props.size}
     >
       {props.title && <title>{props.name}</title>}
-      <mask id="mask__bauhaus" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+      <mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
         <rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
       </mask>
-      <g mask="url(#mask__bauhaus)">
+      <g mask={`url(#${maskID})`}>
         <rect width={SIZE} height={SIZE} fill={properties[0].color} />
         <rect
           x={(SIZE - 60) / 2}

src/lib/components/avatar-beam.js

@@ -36,6 +36,7 @@ function generateData(name, colors) {
 
 const AvatarBeam = (props) => {
   const data = generateData(props.name, props.colors);
+  const maskID = React.useId();
 
   return (
     <svg
@@ -47,10 +48,10 @@ const AvatarBeam = (props) => {
       height={props.size}
     >
       {props.title && <title>{props.name}</title>}
-      <mask id="mask__beam" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+      <mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
         <rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
       </mask>
-      <g mask="url(#mask__beam)">
+      <g mask={`url(#${maskID})`}>
         <rect width={SIZE} height={SIZE} fill={data.backgroundColor} />
         <rect
           x="0"

src/lib/components/avatar-marble.js

@@ -21,6 +21,7 @@ function generateColors(name, colors) {
 
 const AvatarMarble = (props) => {
   const properties = generateColors(props.name, props.colors);
+  const maskID = React.useId();
 
   return (
     <svg
@@ -32,10 +33,10 @@ const AvatarMarble = (props) => {
       height={props.size}
     >
       {props.title && <title>{props.name}</title>}
-      <mask id="mask__marble" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+      <mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
         <rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
       </mask>
-      <g mask="url(#mask__marble)">
+      <g mask={`url(#${maskID})`}>
         <rect width={SIZE} height={SIZE} fill={properties[0].color} />
         <path
           filter="url(#prefix__filter0_f)"

src/lib/components/avatar-pixel.js

@@ -17,6 +17,7 @@ function generateColors(name, colors) {
 
 const AvatarPixel = (props) => {
   const pixelColors = generateColors(props.name, props.colors);
+  const maskID = React.useId();
 
   return (
     <svg
@@ -29,7 +30,7 @@ const AvatarPixel = (props) => {
     >
       {props.title && <title>{props.name}</title>}
       <mask
-        id="mask__pixel"
+        id={maskID}
         mask-type="alpha"
         maskUnits="userSpaceOnUse"
         x={0}
@@ -39,7 +40,7 @@ const AvatarPixel = (props) => {
       >
         <rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
       </mask>
-      <g mask="url(#mask__pixel)">
+      <g mask={`url(#${maskID})`}>
         <rect width={10} height={10} fill={pixelColors[0]} />
         <rect x={20} width={10} height={10} fill={pixelColors[1]} />
         <rect x={40} width={10} height={10} fill={pixelColors[2]} />

src/lib/components/avatar-ring.js

@@ -26,6 +26,7 @@ function generateColors(colors, name) {
 
 const AvatarRing = (props) => {
   const ringColors = generateColors(props.colors, props.name);
+  const maskID = React.useId();
 
   return (
     <svg
@@ -37,10 +38,10 @@ const AvatarRing = (props) => {
       height={props.size}
     >
       {props.title && <title>{props.name}</title>}
-      <mask id="mask__ring" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+      <mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
         <rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
       </mask>
-      <g mask="url(#mask__ring)">
+      <g mask={`url(#${maskID})`}>
         <path d="M0 0h90v45H0z" fill={ringColors[0]} />
         <path d="M0 45h90v45H0z" fill={ringColors[1]} />
         <path d="M83 45a38 38 0 00-76 0h76z" fill={ringColors[2]} />

src/lib/components/avatar-sunset.js

@@ -18,6 +18,7 @@ function generateColors(name, colors) {
 const AvatarSunset = (props) => {
   const sunsetColors = generateColors(props.name, props.colors);
   const name = props.name.replace(/\s/g, '');
+  const maskID = React.useId();
 
   return (
     <svg
@@ -29,10 +30,10 @@ const AvatarSunset = (props) => {
       height={props.size}
     >
       {props.title && <title>{props.name}</title>}
-      <mask id="mask__sunset" maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
+      <mask id={maskID} maskUnits="userSpaceOnUse" x={0} y={0} width={SIZE} height={SIZE}>
         <rect width={SIZE} height={SIZE} rx={props.square ? undefined : SIZE * 2} fill="#FFFFFF" />
       </mask>
-      <g mask="url(#mask__sunset)">
+      <g mask={`url(#${maskID})`}>
         <path fill={'url(#gradient_paint0_linear_' + name + ')'} d="M0 0h80v40H0z" />
         <path fill={'url(#gradient_paint1_linear_' + name + ')'} d="M0 40h80v40H0z" />
       </g>