feat: add boostLevel prop and support value segmentation (#144)

* feat: add boostLevel prop and support value segmentation

* update

* up

Author: li-jia-nan

src/QRCodeCanvas.tsx

@@ -26,6 +26,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       marginSize,
       style,
       imageSettings,
+      boostLevel,
       ...otherProps
     } = props;
     const imgSrc = imageSettings?.src;
@@ -54,6 +55,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       marginSize,
       imageSettings,
       size,
+      boostLevel,
     });
 
     React.useEffect(() => {
@@ -134,6 +136,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
     if (imgSrc != null) {
       img = (
         <img
+          alt="QR-Code"
           src={imgSrc}
           key={imgSrc}
           style={{ display: 'none' }}

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 memoizedQrcode = React.useMemo<QrCode>(() => {
+    const values = Array.isArray(value) ? value : [value];
+    const segments = values.reduce<QrSegment[]>((acc, val) => {
+      acc.push(...QrSegment.makeSegments(val));
+      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,14 @@ 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[];
+  /**
+   * 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;
   /**
    * The size, in pixels, to render the QR Code.
    * @defaultValue 128