@progress/kendo-react-barcodes
Version:
React Barcodes provide a set of React components to build beautiful and customizable barcodes. KendoReact Barcodes package
102 lines (101 loc) • 3.72 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { BaseBarcodeProps } from './BaseBarcodeProps.js';
import { Border, QRCodeEncoding, QRCodeErrorCorrection, QRCodeOverlay } from './types.js';
/**
* Represents the props of the [KendoReact QRCode component](https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode).
*/
export interface QRCodeProps extends BaseBarcodeProps {
/**
* Sets the background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
*
* @default "white"
* @example
* <QRCode background="#ffffff" />
*/
background?: string;
/**
* Sets the border of the QR Code. Accepts an object implementing the `Border` interface.
*
* @example
* <QRCode border={{ color: "black", width: 2 }} />
*/
border?: Border;
/**
* Sets the color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
*
* @default "black"
* @example
* <QRCode color="#000000" />
*/
color?: string;
/**
* 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](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) character set.
* * `"UTF_8"`—Supports all [Unicode](https://en.wikipedia.org/wiki/List_of_Unicode_characters) characters.
*
* @default "ISO_8859_1"
* @example
* <QRCode encoding="UTF_8" />
*/
encoding?: QRCodeEncoding;
/**
* 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" />
*/
errorCorrection?: QRCodeErrorCorrection;
/**
* 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 }} />
*/
overlay?: QRCodeOverlay;
/**
* Sets the padding of the QR Code. A numeric value sets all paddings.
*
* @default 0
* @example
* <QRCode padding={10} />
*/
padding?: 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} />
*/
size?: number | string;
/**
* Sets the value of the QR Code. Accepts a string or a number.
*
* @example
* <QRCode value="https://example.com" />
*/
value: number | string;
}