feat: add boostLevel prop and support value segmentation

Author: li-jia-nan

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[]>((accum, v) => {
+      accum.push(...QrSegment.makeSegments(v));
+      return accum;
+    }, []);
+    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