fix: use unique ids for background gradient

Author: LGLabGreg

apps/playground/src/App.tsx

@@ -29,7 +29,7 @@ function App() {
   const qrCodeOptions: ReactQRCodeProps = {
     ref,
     value: 'https://github.com/LGLabGreg/react-qr-code.git',
-    size: 500,
+    size: 256,
     marginSize: 3,
     background: '#f9f9f9',
     gradient: {
@@ -55,8 +55,8 @@ function App() {
     },
     imageSettings: {
       src: 'https://jd279l8p5w.ufs.sh/f/9xWilHEwGmJB6M4WMqmNVvfeTgSFGJm94uCp2xbtk87Zs1a3',
-      width: 60,
-      height: 60,
+      width: 30,
+      height: 30,
       excavate: true,
       x: 100,
       y: 100,
@@ -118,6 +118,29 @@ function App() {
           <button onClick={() => download({ format: 'jpeg' })}>Download JPEG</button>
         </div>
         <ReactQRCode {...qrCodeOptions} />
+        <ReactQRCode
+          background={{
+            type: 'linear',
+            rotation: 45,
+            stops: [
+              { offset: '0%', color: '#ff7e5f' },
+              { offset: '100%', color: '#feb47b' },
+            ],
+          }}
+          size={256}
+          value='https://reactqrcode.com'
+        />
+        <ReactQRCode
+          background={{
+            type: 'radial',
+            stops: [
+              { offset: '0%', color: '#f00' },
+              { offset: '100%', color: '#0f0' },
+            ],
+          }}
+          size={256}
+          value='https://reactqrcode.com'
+        />
       </div>
     </div>
   )

packages/react-qr-code/src/components/background.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react'
+
 import { BG_GRADIENT_ID } from '../constants'
 import type { BackgroundSettings } from '../types/lib'
 import { calculateGradientVectors } from '../utils/svg'
@@ -12,6 +14,8 @@ const testProps = {
 }
 
 export const Background = ({ background, numCells }: BackgroundProps) => {
+  const uuid = useId()
+  const backgroundId = `${BG_GRADIENT_ID}-${uuid}`
   if (!background) {
     return null
   }
@@ -28,14 +32,14 @@ export const Background = ({ background, numCells }: BackgroundProps) => {
     <>
       <defs>
         {background.type === 'linear' ? (
-          <linearGradient id={BG_GRADIENT_ID} gradientUnits='userSpaceOnUse' {...vectors}>
+          <linearGradient id={backgroundId} gradientUnits='userSpaceOnUse' {...vectors}>
             {background.stops?.map((stop, index) => (
               <stop key={index} offset={stop.offset} stopColor={stop.color} />
             ))}
           </linearGradient>
         ) : (
           <radialGradient
-            id={BG_GRADIENT_ID}
+            id={backgroundId}
             gradientUnits='userSpaceOnUse'
             cx='50%'
             cy='50%'
@@ -48,7 +52,7 @@ export const Background = ({ background, numCells }: BackgroundProps) => {
         )}
       </defs>
       <path
-        fill={`url(#${BG_GRADIENT_ID})`}
+        fill={`url(#${backgroundId})`}
         d={`M0,0 h${numCells}v${numCells}H0z`}
         {...testProps}
       />

packages/react-qr-code/src/react-qr-code.test.tsx

@@ -150,15 +150,22 @@ describe('ReactQRCode', () => {
       const { container } = render(<ReactQRCode value='test' background={gradient} />)
 
       const backgroundPath = screen.getByTestId('background')
-      const stops = container.querySelectorAll(`${selector}#${BG_GRADIENT_ID} stop`)
+      const gradientElement = container.querySelector(
+        `${selector}[id^="${BG_GRADIENT_ID}-"]`,
+      )
+
+      const stops = gradientElement?.querySelectorAll('stop')
 
-      expect(backgroundPath).toHaveAttribute('fill', `url(#${BG_GRADIENT_ID})`)
+      expect(backgroundPath).toHaveAttribute('fill', `url(#${gradientElement?.id})`)
       expect(container.querySelector(`${selector}`)).toBeInTheDocument()
-      expect(stops).toHaveLength(2)
-      expect(stops[0]).toHaveAttribute('stop-color', gradient.stops[0].color)
-      expect(stops[0]).toHaveAttribute('offset', gradient.stops[0].offset)
-      expect(stops[1]).toHaveAttribute('stop-color', gradient.stops[1].color)
-      expect(stops[1]).toHaveAttribute('offset', gradient.stops[1].offset)
+      expect(stops?.length).toBe(2)
+
+      if (stops) {
+        expect(stops[0]).toHaveAttribute('stop-color', gradient.stops[0].color)
+        expect(stops[0]).toHaveAttribute('offset', gradient.stops[0].offset)
+        expect(stops[1]).toHaveAttribute('stop-color', gradient.stops[1].color)
+        expect(stops[1]).toHaveAttribute('offset', gradient.stops[1].offset)
+      }
     })
   })