diff --git a/src/QRCodeCanvas.tsx b/src/QRCodeCanvas.tsx index fa1a236..d5cd979 100644 --- a/src/QRCodeCanvas.tsx +++ b/src/QRCodeCanvas.tsx @@ -26,6 +26,7 @@ const QRCodeCanvas = React.forwardRef( marginSize, style, imageSettings, + boostLevel, ...otherProps } = props; const imgSrc = imageSettings?.src; @@ -54,6 +55,7 @@ const QRCodeCanvas = React.forwardRef( marginSize, imageSettings, size, + boostLevel, }); React.useEffect(() => { @@ -134,6 +136,7 @@ const QRCodeCanvas = React.forwardRef( if (imgSrc != null) { img = ( QR-Code((props, ref) => { title, marginSize, imageSettings, + boostLevel, ...otherProps } = props; @@ -35,6 +36,7 @@ const QRCodeSVG = React.forwardRef((props, ref) => { marginSize, imageSettings, size, + boostLevel, }); let cellsToDraw = cells; diff --git a/src/hooks/useQRCode.tsx b/src/hooks/useQRCode.tsx index 3af1a32..c1da877 100644 --- a/src/hooks/useQRCode.tsx +++ b/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(() => { + const values = Array.isArray(value) ? value : [value]; + const segments = values.reduce((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(); diff --git a/src/interface.ts b/src/interface.ts index e531041..4c2fd19 100644 --- a/src/interface.ts +++ b/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