feat: qr code gradient

Author: LGLabGreg

apps/playground/src/App.tsx

@@ -32,6 +32,14 @@ function App() {
     size: 500,
     marginSize: 3,
     bgColor: '#f1f1f1',
+    gradient: {
+      type: 'linear',
+      rotation: 0,
+      stops: [
+        { offset: '0%', color: '#ff0000' },
+        { offset: '100%', color: '#0000ff' },
+      ],
+    },
     dataModulesSettings: {
       color: '#560bad',
       style: dataModulesStyle,

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

@@ -1,6 +1,6 @@
 import { type ReactNode, useCallback, useMemo } from 'react'
 
-import { DEFAULT_NUM_STAR_POINTS } from '../constants'
+import { DEFAULT_NUM_STAR_POINTS, GRADIENT_ID } from '../constants'
 import type { DataModulesProps } from '../types/utils'
 import {
   bottomRounded,
@@ -29,6 +29,7 @@ export const DataModules = ({
   modules,
   margin,
   settings,
+  gradient,
 }: DataModulesProps): ReactNode => {
   const { color, style, randomSize } = useMemo(
     () => sanitizeDataModulesSettings(settings),
@@ -148,7 +149,7 @@ export const DataModules = ({
   })
   return (
     <path
-      fill={color}
+      fill={gradient ? `url(#${GRADIENT_ID})` : color}
       d={ops.join('')}
       shapeRendering={style === 'square' ? 'crispEdges' : 'geometricPrecision'}
     />

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

@@ -6,6 +6,7 @@ import {
   FINDER_PATTERN_INNER_SIZE,
   FINDER_PATTERN_OUTER_ROTATIONS,
   FINDER_PATTERN_SIZE,
+  GRADIENT_ID,
 } from '../constants'
 import type { FinderPatternsInnerProps } from '../types/utils'
 import {
@@ -19,11 +20,13 @@ export const FinderPatternsInner = ({
   modules,
   margin,
   settings,
+  gradient,
 }: FinderPatternsInnerProps): ReactNode => {
   const { color, style } = useMemo(
     () => sanitizeFinderPatternInnerSettings(settings),
     [settings],
   )
+  const fill = gradient ? `url(#${GRADIENT_ID})` : color
 
   const coordinates = useMemo(
     () => [
@@ -52,7 +55,7 @@ export const FinderPatternsInner = ({
           y={y}
           width={FINDER_PATTERN_INNER_SIZE}
           height={FINDER_PATTERN_INNER_SIZE}
-          fill={color}
+          fill={fill}
           rx={FINDER_PATTERN_INNER_RADIUSES[style]}
         />
       )
@@ -72,7 +75,7 @@ export const FinderPatternsInner = ({
           y={y + posDiff / 2}
           width={size}
           height={size}
-          fill={color}
+          fill={fill}
           style={{
             transform: `rotate(${45}deg)`,
             transformOrigin: 'center',
@@ -112,7 +115,7 @@ export const FinderPatternsInner = ({
         return (
           <path
             key={key(x, y)}
-            fill={color}
+            fill={fill}
             d={path}
             style={{
               transform: `rotate(${rotation}deg)`,
@@ -127,7 +130,7 @@ export const FinderPatternsInner = ({
   if (style === 'heart') {
     return coordinates.map(({ x, y }) => {
       return (
-        <path key={key(x, y)} fill={color} d={heart(x, y, FINDER_PATTERN_INNER_SIZE)} />
+        <path key={key(x, y)} fill={fill} d={heart(x, y, FINDER_PATTERN_INNER_SIZE)} />
       )
     })
   }
@@ -137,7 +140,7 @@ export const FinderPatternsInner = ({
       const cx = x + FINDER_PATTERN_INNER_SIZE / 2
       const cy = y + FINDER_PATTERN_INNER_SIZE / 2
       const path = star(cx, cy, FINDER_PATTERN_INNER_SIZE * 1.2, DEFAULT_NUM_STAR_POINTS)
-      return <path key={key(x, y)} fill={color} d={path} />
+      return <path key={key(x, y)} fill={fill} d={path} />
     })
   }
 

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

@@ -4,6 +4,7 @@ import {
   FINDER_PATTERN_OUTER_RADIUSES,
   FINDER_PATTERN_OUTER_ROTATIONS,
   FINDER_PATTERN_SIZE,
+  GRADIENT_ID,
 } from '../constants'
 import type { FinderPatternsOuterProps } from '../types/utils'
 import {
@@ -17,11 +18,13 @@ export const FinderPatternsOuter = ({
   modules,
   margin,
   settings,
+  gradient,
 }: FinderPatternsOuterProps): ReactNode => {
   const { style, color } = useMemo(
     () => sanitizeFinderPatternOuterSettings(settings),
     [settings],
   )
+  const fill = gradient ? `url(#${GRADIENT_ID})` : color
 
   const ops: Array<string> = []
 
@@ -34,9 +37,6 @@ export const FinderPatternsOuter = ({
     [margin, modules.length],
   )
 
-  console.log('modules.length', modules.length)
-  console.log('coordinates', coordinates)
-
   if (['rounded-sm', 'rounded', 'rounded-lg', 'circle', 'square'].includes(style)) {
     for (const coordinate of coordinates) {
       const { x, y } = coordinate
@@ -74,7 +74,7 @@ export const FinderPatternsOuter = ({
         )
       }
     }
-    return <path fill={color} d={ops.join('')} />
+    return <path fill={fill} d={ops.join('')} />
   }
 
   if (
@@ -106,7 +106,7 @@ export const FinderPatternsOuter = ({
         return (
           <path
             key={`finder-patterns-outer-${style}-${x}-${y}`}
-            fill={color}
+            fill={fill}
             d={path}
             style={{
               transform: `rotate(${rotation}deg)`,

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

@@ -0,0 +1,39 @@
+import { GRADIENT_ID } from '../constants'
+import type { GradientSettings } from '../types/lib'
+import { calculateGradientVectors } from '../utils/svg'
+
+interface GradientProps {
+  gradient?: GradientSettings
+}
+
+export const Gradient = ({ gradient }: GradientProps) => {
+  if (!gradient) {
+    return null
+  }
+
+  const vectors = calculateGradientVectors(gradient?.rotation || 0)
+
+  return (
+    <defs>
+      {gradient.type === 'linear' ? (
+        <linearGradient id={GRADIENT_ID} gradientUnits='userSpaceOnUse' {...vectors}>
+          {gradient.stops?.map((stop, index) => (
+            <stop key={index} offset={stop.offset} stopColor={stop.color} />
+          ))}
+        </linearGradient>
+      ) : (
+        <radialGradient
+          id={GRADIENT_ID}
+          gradientUnits='userSpaceOnUse'
+          cx='50%'
+          cy='50%'
+          r='50%'
+        >
+          {gradient.stops?.map((stop, index) => (
+            <stop key={index} offset={stop.offset} stopColor={stop.color} />
+          ))}
+        </radialGradient>
+      )}
+    </defs>
+  )
+}

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

@@ -33,6 +33,8 @@ 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 GRADIENT_ID = 'react-qr-code-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
 // really should be number of modules covered), but if for some reason we don't

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

@@ -3,6 +3,7 @@ import { useImperativeHandle, useRef } from 'react'
 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_LEVEL,
@@ -21,6 +22,7 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
     size = DEFAULT_SIZE,
     level = DEFAULT_LEVEL,
     bgColor = DEFAULT_BGCOLOR,
+    gradient,
     minVersion = DEFAULT_MINVERSION,
     boostLevel,
     marginSize,
@@ -92,6 +94,12 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
     )
   }
 
+  const svgElementsProps = {
+    modules,
+    margin,
+    gradient,
+  }
+
   return (
     <svg
       height={size}
@@ -102,18 +110,11 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
       aria-label={svgProps?.['aria-label'] || 'QR Code'}
       {...svgProps}
     >
+      <Gradient gradient={gradient} />
       <path fill={bgColor} d={`M0,0 h${numCells}v${numCells}H0z`} />
-      <FinderPatternsOuter
-        modules={modules}
-        margin={margin}
-        settings={finderPatternOuterSettings}
-      />
-      <FinderPatternsInner
-        modules={modules}
-        margin={margin}
-        settings={finderPatternInnerSettings}
-      />
-      <DataModules modules={modules} margin={margin} settings={dataModulesSettings} />
+      <FinderPatternsOuter settings={finderPatternOuterSettings} {...svgElementsProps} />
+      <FinderPatternsInner settings={finderPatternInnerSettings} {...svgElementsProps} />
+      <DataModules settings={dataModulesSettings} {...svgElementsProps} />
       {image}
     </svg>
   )

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

@@ -1,5 +1,3 @@
-import type { Ref } from 'react'
-
 import type qrcodegen from '../lib/qrcodegen'
 
 /**
@@ -17,6 +15,17 @@ export type ERROR_LEVEL_MAPPED_TYPE = {
 /**
  * ReactQRCode props.
  */
+export type GradientSettingsType = 'linear' | 'radial'
+export interface GradientSettingsStop {
+  offset: string
+  color: string
+}
+export interface GradientSettings {
+  type: GradientSettingsType
+  stops: GradientSettingsStop[]
+  rotation?: number
+}
+
 export type DataModulesStyle =
   | 'square'
   | 'square-sm'
@@ -93,7 +102,7 @@ export interface ReactQRCodeRef {
 }
 
 export interface ReactQRCodeProps {
-  ref?: Ref<ReactQRCodeRef>
+  ref?: React.Ref<ReactQRCodeRef>
   /**
    * The value to encode into the QR Code. An array of strings can be passed in
    * to represent multiple segments to further optimize the QR Code.
@@ -139,6 +148,10 @@ export interface ReactQRCodeProps {
    * @defaultValue #FFFFFF
    */
   bgColor?: string
+  /**
+   * The gradient settings applied to the whole qr code.
+   */
+  gradient?: GradientSettings
   /**
    * The settings for the data modules.
    */

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

@@ -7,6 +7,7 @@ import type {
   Excavation,
   FinderPatternInnerSettings,
   FinderPatternOuterSettings,
+  GradientSettings,
   ImageSettings,
   Modules,
 } from './lib'
@@ -20,6 +21,7 @@ export interface FilterFnProps {
 export interface GeneratePathFnProps {
   modules: Modules
   margin: number
+  gradient?: GradientSettings
 }
 
 export interface FinderPatternsOuterProps extends GeneratePathFnProps {

packages/react-qr-code/src/utils/download.ts

@@ -79,7 +79,7 @@ export const downloadRaster = ({
         a.click()
         document.body.removeChild(a)
       }
-
+      // eslint-disable-next-line no-console
       logoImg.onerror = (err) => console.error('Error loading logo:', err)
     } else {
       const imageType = fileFormat === 'png' ? 'image/png' : 'image/jpeg'
@@ -91,6 +91,6 @@ export const downloadRaster = ({
       document.body.removeChild(a)
     }
   }
-
+  // eslint-disable-next-line no-console
   qrImg.onerror = (err) => console.error('Error loading QR code:', err)
 }