fix: allow transparent background

Author: LGLabGreg

.changeset/stupid-dolphins-design.md

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

apps/playground/src/App.tsx

@@ -31,7 +31,7 @@ function App() {
     value: 'https://github.com/LGLabGreg/react-qr-code.git',
     size: 500,
     marginSize: 3,
-    background: '#f9f9f9',
+    //background: '#f9f9f9',
     gradient: {
       type: 'linear',
       rotation: 0,

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/LGLabGreg/react-qr-code.git"
   },
-  "packageManager": "pnpm@10.2.0",
+  "packageManager": "pnpm@10.2.1",
   "type": "module",
   "scripts": {
     "dev": "pnpm concurrently --names packages,apps \"pnpm watch:packages\" \"pnpm watch:apps\"",

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', () => {