New to KendoReact? Start a free 30-day trial

QRCodeProps

Interface

Represents the props of the KendoReact QRCode component.

Definition

Package:@progress/kendo-react-barcodes

Properties

background?

string

Sets the background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.

Default:

"white"

Example:

<QRCode background="#ffffff" />

border?

Border

Sets the border of the QR Code. Accepts an object implementing the Border interface.

Example:

<QRCode border={{ color: "black", width: 2 }} />

className?

string

Sets additional CSS classes to the component.

Example:

<Barcode className="custom-barcode-class" />

color?

string

Sets the color of the QR Code. Accepts a valid CSS color string, including hex and rgb.

Default:

"black"

Example:

<QRCode color="#000000" />

encoding?

QRCodeEncoding

Sets the encoding mode used to encode the value.

Important The UTF-8 encoding is not included in the specifications and some readers do not support it.

The possible values are:

"ISO_8859_1"—Supports all characters from the ISO/IEC 8859-1 character set.
"UTF_8"—Supports all Unicode characters.

Default:

"ISO_8859_1"

Example:

<QRCode encoding="UTF_8" />

errorCorrection?

QRCodeErrorCorrection

Sets the error correction level to use.

The possible values are:

"L"—Approximately 7% of the codewords can be restored.
"M"—Approximately 15% of the codewords can be restored.
"Q"—Approximately 25% of the codewords can be restored.
"H"—Approximately 30% of the codewords can be restored.

Default:

"L"

Example:

<QRCode errorCorrection="H" />

overlay?

QRCodeOverlay

An optional image overlay that displays over the QR Code.

Note Always test if the code reads correctly with the applied overlay. Depending on the length of the value and the size of the overlay, you might need to raise the errorCorrection level to "M" or "H".

Example:

<QRCode overlay={{ imageUrl: "https://example.com/logo.png", size: 50 }} />

padding?

number

Sets the padding of the QR Code. A numeric value sets all paddings.

Default:

Example:

<QRCode padding={10} />

renderAs?

RenderMode

Sets the preferred rendering engine.

The supported values are:

"svg"—If available, renders the component as an inline svg element.
"canvas"—If available, renders the component as a canvas element.

Example:

<Barcode renderAs="svg" />

size?

string | number

Determines the size of a QR Code. Numeric values represent pixels.

If you do not specify a size, the size will be determined from the element width and height. If the element has width or height of zero, a default value of 200 pixels will be used.

Default:

"200px"

Example:

<QRCode size={300} />

style?

CSSProperties

Sets the styles that the component applies.

Example:

<Barcode style={{ backgroundColor: "lightgray" }} />

value

string | number

Sets the value of the QR Code. Accepts a string or a number.

Example:

<QRCode value="https://example.com" />