Merge branch 'main' of github.com-lglab:LGLabGreg/react-qr-code

Author: LGLabGreg

.changeset/stupid-dolphins-design.md

@@ -0,0 +1,5 @@
+---
+'@lglab/react-qr-code': patch
+---
+
+Allow transparent background

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/LGLabGreg/react-qr-code.git"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "type": "module",
   "scripts": {
     "dev": "pnpm concurrently --names packages,apps \"pnpm watch:packages\" \"pnpm watch:apps\"",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
-    "@eslint/js": "^9.19.0",
+    "@eslint/js": "^9.20.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
@@ -37,7 +37,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "3.0.5",
     "concurrently": "^9.1.2",
-    "eslint": "^9.19.0",
+    "eslint": "^9.20.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",

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

@@ -1,4 +1,4 @@
-import { BG_GRADIENT_ID, DEFAULT_BGCOLOR } from '../constants'
+import { BG_GRADIENT_ID } from '../constants'
 import type { BackgroundSettings } from '../types/lib'
 import { calculateGradientVectors } from '../utils/svg'
 
@@ -13,13 +13,7 @@ const testProps = {
 
 export const Background = ({ background, numCells }: BackgroundProps) => {
   if (!background) {
-    return (
-      <path
-        fill={DEFAULT_BGCOLOR}
-        d={`M0,0 h${numCells}v${numCells}H0z`}
-        {...testProps}
-      />
-    )
+    return null
   }
 
   if (typeof background === 'string') {

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

@@ -4,7 +4,6 @@ import { describe, expect, it, vi } from 'vitest'
 
 import {
   BG_GRADIENT_ID,
-  DEFAULT_BGCOLOR,
   DEFAULT_MARGIN_SIZE,
   DEFAULT_SIZE,
   GRADIENT_ID,
@@ -121,11 +120,11 @@ describe('ReactQRCode', () => {
   })
 
   describe('Background', () => {
-    it('renders with default background color', () => {
+    it('renders without background if not provided', () => {
       render(<ReactQRCode value='test' />)
 
-      const background = screen.getByTestId('background')
-      expect(background).toHaveAttribute('fill', DEFAULT_BGCOLOR)
+      const background = screen.queryByTestId('background')
+      expect(background).not.toBeInTheDocument()
     })
 
     it('renders with custom background color', () => {