diff --git a/README.md b/README.md index 4e3d85e..7c0fa52 100644 --- a/README.md +++ b/README.md @@ -47,9 +47,10 @@ Below is a condensed type definition of the props `QRCodeSVG` and `QRCodeCanvas` ```ts type QRProps = { /** - * The value to encode into the QR Code. + * 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 @@ -99,6 +100,13 @@ 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; /** * The settings for the embedded image. */ @@ -153,9 +161,9 @@ type QRProps = { The value to encode into the QR Code. See [Encoding Mode](#encoding-mode) for additional details. -| Type | Default Value | -| -------- | ------------- | -| `string` | — | +| Type | Default Value | +| ------------------- | ------------- | +| `string \| string[]` | — | ### `size` @@ -231,6 +239,14 @@ The minimum version used when encoding the QR Code. Valid values are 1-40 with h | -------- | ------------- | | `number` | `1` | +### `boostLevel` + +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. + +| Type | Default Value | +| --------- | ------------- | +| `boolean` | `true` | + ### `imageSettings` Used to specify the details for an embedded image, often used to embed a logo. diff --git a/examples/full.tsx b/examples/full.tsx index 56df34a..c567cff 100644 --- a/examples/full.tsx +++ b/examples/full.tsx @@ -12,6 +12,7 @@ function FullDemo() { const [fgColor, setFgColor] = useState('#000000'); const [bgColor, setBgColor] = useState('#ffffff'); const [level, setLevel] = useState('L'); + const [boostLevel, setBoostLevel] = useState(true); const [minVersion, setMinVersion] = useState(1); const [marginSize, setMarginSize] = useState(0); const [title, setTitle] = useState('Title for my QR Code'); @@ -45,6 +46,10 @@ function FullDemo() { ? `minVersion={${minVersion}} ` : ''; + const boostLevelCode = !boostLevel + ? `boostLevel={${boostLevel}} +` + : ''; return `import {${componentName}} from 'qrcode.react'; <${componentName} value={"${value}"} @@ -53,7 +58,7 @@ function FullDemo() { bgColor={"${bgColor}"} fgColor={"${fgColor}"} level={"${level}"} - ${minVersionCode}marginSize={${marginSize}}${imageSettingsCode} + ${minVersionCode}${boostLevelCode}marginSize={${marginSize}}${imageSettingsCode} />`; } const svgCode = makeExampleCode('QRCodeSVG'); @@ -68,6 +73,7 @@ function FullDemo() { level, marginSize, minVersion, + boostLevel, imageSettings: includeImage ? { src: imageSrc, @@ -144,6 +150,17 @@ function FullDemo() { /> +
+ +