Generates a QR code based on the provided value and options. The component renders an SVG representation of the QR code, which can be customized using various properties.
CSS Parts
background — The background rect of the QR code.
dots — The data modules (dots) of the QR code.
corner-square — The outer corner (finder-pattern) squares of the QR code.
corner-dot — The inner corner (finder-pattern) dots of the QR code.

Properties

Section titled "Properties"

dotStyle

Section titled "dotStyle"

The style of the data modules (dots) in the QR code, and of the inner dot of each finder-pattern corner. This can be 'square', 'circle', or 'rounded'.

 
dotStyle: QrDotStyle

errorLevel

Section titled "errorLevel"

The error correction level for the QR code, which determines the QR code's ability to be read if it is partially obscured or damaged. Valid values are 'L', 'M', 'Q', and 'H', where 'L' provides the lowest level of error correction and 'H' provides the highest level.

 
errorLevel: QrErrorCorrectionLevel | undefined

logoMargin

Section titled "logoMargin"

The margin around the logo in pixels. This is the whitespace area surrounding the logo within the QR code, which helps ensure that the logo does not interfere with the QR code's scannability.

 
logoMargin: number | undefined

logoSize

Section titled "logoSize"

The size of the logo, as a ratio of the maximum area that can safely be obscured by a logo while the QR code remains scannable (up to 9% of the code's area, at the highest error correction level). The value should be a number between 0 and 1, where 0 means no logo and 1 means the logo will cover the full safe area (not the entire QR code). The default value is 0.4, meaning the logo covers 40% of that safe area (~3.6% of the QR code).

When error-level is not explicitly set, the smallest error correction level that can accommodate the requested logo size is chosen automatically.

 
logoSize: number

logoSrc

Section titled "logoSrc"

The source URL of an optional logo image to be displayed at the center of the QR code. The logo can help with branding and recognition. If provided, the component will attempt to render the logo within the QR code while maintaining scannability.

 
logoSrc: string | undefined

margin

Section titled "margin"

The margin (quiet zone) around the QR code, expressed as a number of QR code modules rather than pixels. This is the blank border area surrounding the code, which helps ensure that it can be properly scanned.

 
margin: number

size

Section titled "size"

The size of the QR code in pixels. This determines the width and height of the generated QR code. The default value is 128 pixels.

 
size: number

squareStyle

Section titled "squareStyle"

The style of the corner squares in the QR code. This can be 'square', 'circle', or 'rounded'.

 
squareStyle: QrCornerSquareStyle

value

Section titled "value"

The value to be encoded in the QR code. This can be any string, such as a URL, text, or other data. When this property is set, the component will generate a QR code representing the provided value.

 
value: string | undefined

version

Section titled "version"

The version of the QR code to generate, which determines the size and data capacity of the QR code. Valid values are integers from 1 to 40, where each version corresponds to a specific module size and data capacity.

If not specified, the component will automatically select the smallest version that can accommodate the provided value.

 
version: number | undefined

Methods

Section titled "Methods"

toBlob

Section titled "toBlob"

Serializes the QR code to an image/svg+xml blob.

Theme colors are resolved to plain fill attributes and a logo that is not a data URI is fetched and inlined, so the blob renders identically outside the component. A logo that cannot be fetched (for example a cross-origin URL without CORS headers) is omitted.

Rejects when the component has no value.

 
toBlob(): Promise<Blob>

Returns Promise<Blob>

toImage

Section titled "toImage"

Exports the QR code as an image file.

The scale option multiplies the size of the component: a 256px QR code exported with scale: 2 produces a 512x512 image. When download is true the browser download dialog opens for the file.

Rejects when the component has no value, when format is not supported, when scale is not a positive finite number, or when the resulting image exceeds the maximum canvas size.

 
toImage(options: QrCodeExportOptions): Promise<File>

Parameters

Returns Promise<File>