Skip to content

Commit 61ecdce

Browse files
LGLabGregLGLabGreg
authored
Merge pull request #68 from LGLabGreg/fix-gradient-unique-ids
Fix gradient unique ids
2 parents 46aa014 + 019d196 commit 61ecdce

File tree

15 files changed

+326
-255
lines changed

15 files changed

+326
-255
lines changed

‎.changeset/tall-masks-appear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lglab/react-qr-code': patch
3+
---
4+
5+
Fix issue with multiple QR codes sharing same gradient

‎apps/playground/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
},
1010
"dependencies": {
1111
"@lglab/react-qr-code": "workspace:*",
12-
"@tailwindcss/vite": "^4.0.4",
12+
"@tailwindcss/vite": "^4.0.6",
1313
"react": "^19.0.0",
1414
"react-dom": "^19.0.0",
15-
"tailwindcss": "^4.0.4"
15+
"tailwindcss": "^4.0.6"
1616
},
1717
"devDependencies": {
18-
"@types/node": "^22.13.1",
18+
"@types/node": "^22.13.4",
1919
"@types/react": "^19.0.8",
2020
"@types/react-dom": "^19.0.3",
2121
"@vitejs/plugin-react": "^4.3.4",
22-
"globals": "^15.14.0",
22+
"globals": "^15.15.0",
2323
"typescript": "~5.7.3",
2424
"vite": "^6.1.0"
2525
}

‎apps/playground/src/App.tsx‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function App() {
2929
const qrCodeOptions: ReactQRCodeProps = {
3030
ref,
3131
value: 'https://github.com/LGLabGreg/react-qr-code.git',
32-
size: 500,
32+
size: 256,
3333
marginSize: 3,
3434
background: '#f9f9f9',
3535
gradient: {
@@ -55,8 +55,8 @@ function App() {
5555
},
5656
imageSettings: {
5757
src: 'https://jd279l8p5w.ufs.sh/f/9xWilHEwGmJB6M4WMqmNVvfeTgSFGJm94uCp2xbtk87Zs1a3',
58-
width: 60,
59-
height: 60,
58+
width: 30,
59+
height: 30,
6060
excavate: true,
6161
x: 100,
6262
y: 100,
@@ -118,6 +118,41 @@ function App() {
118118
<button onClick={() => download({ format: 'jpeg' })}>Download JPEG</button>
119119
</div>
120120
<ReactQRCode {...qrCodeOptions} />
121+
<ReactQRCode
122+
background={{
123+
type: 'linear',
124+
rotation: 45,
125+
stops: [
126+
{ offset: '0%', color: '#00f' },
127+
{ offset: '100%', color: '#f00' },
128+
],
129+
}}
130+
size={256}
131+
value='https://reactqrcode.com'
132+
/>
133+
<ReactQRCode
134+
background={{
135+
type: 'radial',
136+
stops: [
137+
{ offset: '0%', color: '#f00' },
138+
{ offset: '100%', color: '#0f0' },
139+
],
140+
}}
141+
size={256}
142+
value='https://reactqrcode.com'
143+
/>
144+
<ReactQRCode
145+
gradient={{
146+
type: 'linear',
147+
rotation: 45,
148+
stops: [
149+
{ offset: '0%', color: '#f00' },
150+
{ offset: '100%', color: '#0f0' },
151+
],
152+
}}
153+
size={256}
154+
value='https://reactqrcode.com'
155+
/>
121156
</div>
122157
</div>
123158
)

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,22 @@
3434
"@testing-library/react": "^16.2.0",
3535
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
3636
"@types/jsdom": "^21.1.7",
37-
"@types/node": "^22.12.0",
37+
"@types/node": "^22.13.4",
3838
"@vitejs/plugin-react": "^4.3.4",
3939
"@vitest/coverage-v8": "3.0.5",
4040
"concurrently": "^9.1.2",
41-
"eslint": "^9.20.0",
41+
"eslint": "^9.20.1",
4242
"eslint-plugin-react": "^7.37.4",
4343
"eslint-plugin-react-hooks": "^5.1.0",
44-
"eslint-plugin-react-refresh": "^0.4.18",
45-
"globals": "^15.14.0",
44+
"eslint-plugin-react-refresh": "^0.4.19",
45+
"globals": "^15.15.0",
4646
"husky": "^9.1.7",
4747
"jsdom": "^26.0.0",
4848
"lint-staged": "^15.4.3",
4949
"react": "^19.0.0",
5050
"react-dom": "^19.0.0",
5151
"typescript": "~5.7.3",
52-
"typescript-eslint": "^8.23.0",
52+
"typescript-eslint": "^8.24.0",
5353
"vite": "^6.1.0",
5454
"vitest": "^3.0.5"
5555
}

‎packages/react-qr-code/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,15 @@
4949
"react": "^18 || ^19"
5050
},
5151
"devDependencies": {
52-
"@types/node": "^22.13.1",
52+
"@types/node": "^22.13.4",
5353
"@types/react": "^19.0.8",
5454
"@types/react-dom": "^19.0.3",
5555
"@vitejs/plugin-react": "^4.3.4",
56-
"globals": "^15.14.0",
56+
"globals": "^15.15.0",
5757
"react": "^19.0.0",
5858
"react-dom": "^19.0.0",
5959
"typescript": "~5.7.3",
60-
"typescript-eslint": "^8.23.0",
60+
"typescript-eslint": "^8.24.0",
6161
"vite": "^6.1.0",
6262
"vite-plugin-dts": "^4.5.0"
6363
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { BG_GRADIENT_ID } from '../constants'
21
import type { BackgroundSettings } from '../types/lib'
32
import { calculateGradientVectors } from '../utils/svg'
43

54
interface BackgroundProps {
65
background?: BackgroundSettings
6+
bgGradientId: string
77
numCells: number
88
}
99

1010
const testProps = {
1111
'data-testid': 'background',
1212
}
1313

14-
export const Background = ({ background, numCells }: BackgroundProps) => {
14+
export const Background = ({ background, bgGradientId, numCells }: BackgroundProps) => {
1515
if (!background) {
1616
return null
1717
}
@@ -28,14 +28,14 @@ export const Background = ({ background, numCells }: BackgroundProps) => {
2828
<>
2929
<defs>
3030
{background.type === 'linear' ? (
31-
<linearGradient id={BG_GRADIENT_ID} gradientUnits='userSpaceOnUse' {...vectors}>
31+
<linearGradient id={bgGradientId} gradientUnits='userSpaceOnUse' {...vectors}>
3232
{background.stops?.map((stop, index) => (
3333
<stop key={index} offset={stop.offset} stopColor={stop.color} />
3434
))}
3535
</linearGradient>
3636
) : (
3737
<radialGradient
38-
id={BG_GRADIENT_ID}
38+
id={bgGradientId}
3939
gradientUnits='userSpaceOnUse'
4040
cx='50%'
4141
cy='50%'
@@ -48,7 +48,7 @@ export const Background = ({ background, numCells }: BackgroundProps) => {
4848
)}
4949
</defs>
5050
<path
51-
fill={`url(#${BG_GRADIENT_ID})`}
51+
fill={`url(#${bgGradientId})`}
5252
d={`M0,0 h${numCells}v${numCells}H0z`}
5353
{...testProps}
5454
/>

‎packages/react-qr-code/src/components/data-modules.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type ReactNode, useCallback, useMemo } from 'react'
22

3-
import { DEFAULT_NUM_STAR_POINTS, GRADIENT_ID } from '../constants'
3+
import { DEFAULT_NUM_STAR_POINTS } from '../constants'
44
import type { DataModulesProps } from '../types/utils'
55
import {
66
bottomRounded,
@@ -31,6 +31,7 @@ export const DataModules = ({
3131
margin,
3232
settings,
3333
gradient,
34+
gradientId,
3435
}: DataModulesProps): ReactNode => {
3536
const { color, style, randomSize } = useMemo(
3637
() => sanitizeDataModulesSettings(settings),
@@ -150,7 +151,7 @@ export const DataModules = ({
150151
})
151152
return (
152153
<path
153-
fill={gradient ? `url(#${GRADIENT_ID})` : color}
154+
fill={gradient ? `url(#${gradientId})` : color}
154155
d={ops.join('')}
155156
shapeRendering={style === 'square' ? 'crispEdges' : 'geometricPrecision'}
156157
data-testid='data-modules'

‎packages/react-qr-code/src/components/finder-patterns-inner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
FINDER_PATTERN_INNER_SIZE,
77
FINDER_PATTERN_OUTER_ROTATIONS,
88
FINDER_PATTERN_SIZE,
9-
GRADIENT_ID,
109
} from '../constants'
1110
import type { FinderPatternsInnerProps } from '../types/utils'
1211
import {
@@ -25,12 +24,13 @@ export const FinderPatternsInner = ({
2524
margin,
2625
settings,
2726
gradient,
27+
gradientId,
2828
}: FinderPatternsInnerProps): ReactNode => {
2929
const { color, style } = useMemo(
3030
() => sanitizeFinderPatternInnerSettings(settings),
3131
[settings],
3232
)
33-
const fill = gradient ? `url(#${GRADIENT_ID})` : color
33+
const fill = gradient ? `url(#${gradientId})` : color
3434

3535
const coordinates = useMemo(
3636
() => [

‎packages/react-qr-code/src/components/finder-patterns-outer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
FINDER_PATTERN_OUTER_RADIUSES,
55
FINDER_PATTERN_OUTER_ROTATIONS,
66
FINDER_PATTERN_SIZE,
7-
GRADIENT_ID,
87
} from '../constants'
98
import type { FinderPatternsOuterProps } from '../types/utils'
109
import {
@@ -23,12 +22,13 @@ export const FinderPatternsOuter = ({
2322
margin,
2423
settings,
2524
gradient,
25+
gradientId,
2626
}: FinderPatternsOuterProps): ReactNode => {
2727
const { style, color } = useMemo(
2828
() => sanitizeFinderPatternOuterSettings(settings),
2929
[settings],
3030
)
31-
const fill = gradient ? `url(#${GRADIENT_ID})` : color
31+
const fill = gradient ? `url(#${gradientId})` : color
3232

3333
const ops: Array<string> = []
3434

‎packages/react-qr-code/src/components/gradient.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { GRADIENT_ID } from '../constants'
21
import type { GradientSettings } from '../types/lib'
32
import { calculateGradientVectors } from '../utils/svg'
43

54
interface GradientProps {
65
gradient?: GradientSettings
6+
gradientId: string
77
}
88

9-
export const Gradient = ({ gradient }: GradientProps) => {
9+
export const Gradient = ({ gradient, gradientId }: GradientProps) => {
1010
if (!gradient) {
1111
return null
1212
}
@@ -16,14 +16,14 @@ export const Gradient = ({ gradient }: GradientProps) => {
1616
return (
1717
<defs>
1818
{gradient.type === 'linear' ? (
19-
<linearGradient id={GRADIENT_ID} gradientUnits='userSpaceOnUse' {...vectors}>
19+
<linearGradient id={gradientId} gradientUnits='userSpaceOnUse' {...vectors}>
2020
{gradient.stops?.map((stop, index) => (
2121
<stop key={index} offset={stop.offset} stopColor={stop.color} />
2222
))}
2323
</linearGradient>
2424
) : (
2525
<radialGradient
26-
id={GRADIENT_ID}
26+
id={gradientId}
2727
gradientUnits='userSpaceOnUse'
2828
cx='50%'
2929
cy='50%'

0 commit comments

Comments
 (0)