feat: value support string[] type

src/QRCodeCanvas.tsx

@@ -26,6 +26,7 @@
       marginSize,
       style,
       imageSettings,
+      boostLevel,
       ...otherProps
     } = props;
     const imgSrc = imageSettings?.src;
@@ -54,6 +55,7 @@
       marginSize,
       imageSettings,
       size,
+      boostLevel,
     });
 
     React.useEffect(() => {
@@ -137,9 +139,7 @@
           src={imgSrc}
           key={imgSrc}
           style={{ display: 'none' }}
-          onLoad={() => {
-            setIsImageLoaded(true);
-          }}
+          onLoad={() => setIsImageLoaded(true)}
           ref={_image}
           // when crossOrigin is not set, the image will be tainted
           // and the canvas cannot be exported to an image

src/QRCodeSVG.tsx

@@ -24,6 +24,7 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>((props, ref) => {
     title,
     marginSize,
     imageSettings,
+    boostLevel,
     ...otherProps
   } = props;
 
@@ -35,6 +36,7 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>((props, ref) => {
     marginSize,
     imageSettings,
     size,
+    boostLevel,
   });
 
   let cellsToDraw = cells;

src/hooks/useQRCode.tsx

@@ -4,13 +4,14 @@ import { ERROR_LEVEL_MAP, getImageSettings, getMarginSize } from '../utils';
 import React from 'react';
 
 interface Options {
-  value: string;
+  value: string | string[];
   level: ErrorCorrectionLevel;
   minVersion: number;
   includeMargin: boolean;
   marginSize?: number;
   imageSettings?: ImageSettings;
   size: number;
+  boostLevel?: boolean;
 }
 
 export const useQRCode = (opt: Options) => {
@@ -22,12 +23,24 @@ export const useQRCode = (opt: Options) => {
     marginSize,
     imageSettings,
     size,
+    boostLevel,
   } = opt;
 
   const memoizedQrcode = React.useMemo(() => {
-    const segments = QrSegment.makeSegments(value);
-    return QrCode.encodeSegments(segments, ERROR_LEVEL_MAP[level], minVersion);
-  }, [value, level, minVersion]);
+    const values = Array.isArray(value) ? value : [value];
+    const segments = values.reduce<QrSegment[]>((acc, v) => {
+      acc.push(...QrSegment.makeSegments(v));
+      return acc;
+    }, []);
+    return QrCode.encodeSegments(
+      segments,
+      ERROR_LEVEL_MAP[level],
+      minVersion,
+      undefined,
+      undefined,
+      boostLevel,
+    );
+  }, [value, level, minVersion, boostLevel]);
 
   return React.useMemo(() => {
     const cs = memoizedQrcode.getModules();

src/interface.ts

@@ -60,7 +60,7 @@ export type QRProps = {
    * 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.
    */
-  value: string;
+  value: string | string[];
   /**
    * The size, in pixels, to render the QR Code.
    * @defaultValue 128
@@ -118,6 +118,14 @@ export type QRProps = {
    * @defaultValue 1
    */
   minVersion?: number;
+
+  /**
+   * If enabled, the Error Correction Level of the result may be higher than
+   * the specified Error Correction Level option if it can be done without
+   * increasing the version.
+   * @defaultValue true
+   */
+  boostLevel?: boolean;
 };
 
 export type QRPropsCanvas = QRProps &