feat: background gradient

Author: LGLabGreg

apps/playground/src/App.tsx

@@ -31,13 +31,13 @@ function App() {
     value: 'https://github.com/LGLabGreg/react-qr-code.git',
     size: 500,
     marginSize: 3,
-    bgColor: '#f1f1f1',
+    background: '#f9f9f9',
     gradient: {
       type: 'linear',
       rotation: 0,
       stops: [
-        { offset: '0%', color: '#ff0000' },
-        { offset: '100%', color: '#0000ff' },
+        { offset: '0%', color: '#4568DC' },
+        { offset: '100%', color: '#B06AB3' },
       ],
     },
     dataModulesSettings: {
@@ -64,7 +64,7 @@ function App() {
   }
 
   const download = ({ format = 'svg', size = 400 }: DownloadOptions) => {
-    ref.current?.download({ format, size, name: 'demo-qr-code' })
+    ref.current?.download({ format, size })
   }
 
   return (

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

@@ -0,0 +1,47 @@
+import { BG_GRADIENT_ID, DEFAULT_BGCOLOR } from '../constants'
+import type { BackgroundSettings } from '../types/lib'
+import { calculateGradientVectors } from '../utils/svg'
+
+interface BackgroundProps {
+  background?: BackgroundSettings
+  numCells: number
+}
+
+export const Background = ({ background, numCells }: BackgroundProps) => {
+  if (!background) {
+    return <path fill={DEFAULT_BGCOLOR} d={`M0,0 h${numCells}v${numCells}H0z`} />
+  }
+
+  if (typeof background === 'string') {
+    return <path fill={background} d={`M0,0 h${numCells}v${numCells}H0z`} />
+  }
+
+  const vectors = calculateGradientVectors(background?.rotation || 0)
+
+  return (
+    <>
+      <defs>
+        {background.type === 'linear' ? (
+          <linearGradient id={BG_GRADIENT_ID} gradientUnits='userSpaceOnUse' {...vectors}>
+            {background.stops?.map((stop, index) => (
+              <stop key={index} offset={stop.offset} stopColor={stop.color} />
+            ))}
+          </linearGradient>
+        ) : (
+          <radialGradient
+            id={BG_GRADIENT_ID}
+            gradientUnits='userSpaceOnUse'
+            cx='50%'
+            cy='50%'
+            r='50%'
+          >
+            {background.stops?.map((stop, index) => (
+              <stop key={index} offset={stop.offset} stopColor={stop.color} />
+            ))}
+          </radialGradient>
+        )}
+      </defs>
+      <path fill={`url(#${BG_GRADIENT_ID})`} d={`M0,0 h${numCells}v${numCells}H0z`} />
+    </>
+  )
+}

packages/react-qr-code/src/constants.ts

@@ -33,7 +33,10 @@ export const DEFAULT_FINDER_PATTERN_OUTER_STYLE: FinderPatternOuterStyle = 'squa
 export const DEFAULT_FINDER_PATTERN_INNER_STYLE: FinderPatternInnerStyle = 'square'
 export const DEFAULT_DATA_MODULES_STYLE: DataModulesStyle = 'square'
 
+export const DEFAULT_FILENAME = 'react-qr-code'
+
 export const GRADIENT_ID = 'react-qr-code-gradient'
+export const BG_GRADIENT_ID = 'react-qr-code-bg-gradient'
 
 // This is *very* rough estimate of max amount of QRCode allowed to be covered.
 // It is "wrong" in a lot of ways (area is a terrible way to estimate, it

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

@@ -1,11 +1,12 @@
 import { useImperativeHandle, useRef } from 'react'
 
+import { Background } from './components/background'
 import { DataModules } from './components/data-modules'
 import { FinderPatternsInner } from './components/finder-patterns-inner'
 import { FinderPatternsOuter } from './components/finder-patterns-outer'
 import { Gradient } from './components/gradient'
 import {
-  DEFAULT_BGCOLOR,
+  DEFAULT_FILENAME,
   DEFAULT_LEVEL,
   DEFAULT_MINVERSION,
   DEFAULT_SIZE,
@@ -21,7 +22,7 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
     value,
     size = DEFAULT_SIZE,
     level = DEFAULT_LEVEL,
-    bgColor = DEFAULT_BGCOLOR,
+    background,
     gradient,
     minVersion = DEFAULT_MINVERSION,
     boostLevel,
@@ -48,7 +49,7 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
   useImperativeHandle(ref, () => ({
     svg: svgRef.current,
     download: ({
-      name: fileName = 'qr-code',
+      name: fileName = DEFAULT_FILENAME,
       format: fileFormat = 'svg',
       size: fileSize = 500,
     }: DownloadOptions) => {
@@ -111,7 +112,7 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
       {...svgProps}
     >
       <Gradient gradient={gradient} />
-      <path fill={bgColor} d={`M0,0 h${numCells}v${numCells}H0z`} />
+      <Background background={background} numCells={numCells} />
       <FinderPatternsOuter settings={finderPatternOuterSettings} {...svgElementsProps} />
       <FinderPatternsInner settings={finderPatternInnerSettings} {...svgElementsProps} />
       <DataModules settings={dataModulesSettings} {...svgElementsProps} />

packages/react-qr-code/src/types/lib.ts

@@ -15,6 +15,8 @@ export type ERROR_LEVEL_MAPPED_TYPE = {
 /**
  * ReactQRCode props.
  */
+export type BackgroundSettings = string | GradientSettings
+
 export type GradientSettingsType = 'linear' | 'radial'
 export interface GradientSettingsStop {
   offset: string
@@ -143,13 +145,12 @@ export interface ReactQRCodeProps {
    */
   boostLevel?: boolean
   /**
-   * The background color used to render the QR Code.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   * The QR code background either a hex color or GradientSettings.
    * @defaultValue #FFFFFF
    */
-  bgColor?: string
+  background?: BackgroundSettings
   /**
-   * The gradient settings applied to the whole qr code.
+   * The gradient settings applied to the qr code data modules and finder patterns.
    */
   gradient?: GradientSettings
   /**