@progress/kendo-react-barcodes/index.d.mts

React Barcodes provide a set of React components to build beautiful and customizable barcodes. KendoReact Barcodes package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { Group } from '@progress/kendo-drawing';
import { ImageExportOptions } from '@progress/kendo-drawing';
import * as React_2 from 'react';
import { Surface } from '@progress/kendo-drawing';
import { SVGExportOptions } from '@progress/kendo-drawing';

/**
 * Represents the KendoReact Barcode component.
 */
export declare class Barcode extends React_2.Component<BarcodeProps, {}> {
    private _baseBarcode;
    /**
     * @hidden
     */
    get barcodeInstance(): any;
    /**
     * The Drawing `Surface` of the Barcode.
     */
    get surface(): Surface | null;
    /**
     * The DOM element of the Barcode.
     */
    get element(): HTMLDivElement | null;
    /**
     * @hidden
     */
    render(): any;
    /**
     * Exports the component as an image. The export operation is asynchronous and returns a promise.
     *
     * @param {ImageExportOptions} options - The parameters for the exported image.
     * @returns {Promise<string>} - A promise that will be resolved with a PNG image encoded as a Data URI.
     */
    exportImage(options?: ImageExportOptions): Promise<string>;
    /**
     * Exports the component as an SVG document. The export operation is asynchronous and returns a promise.
     *
     * @param options - The parameters for the exported file.
     * @returns - A promise that will be resolved with an SVG document that is encoded as a Data URI.
     */
    exportSVG(options?: SVGExportOptions): Promise<string>;
    /**
     * Exports a Barcode component as a Drawing `Scene`.
     *
     * @param {any} options - The parameters for the export operation.
     * @returns {Group} - A promise that returns the root `Group` of the scene.
     */
    exportVisual(options?: any): Group;
    private getTarget;
    private deriveOptionsFromParent;
}

/**
 * Represents the props of the [KendoReact Barcode component]({% slug overview_barcode_barcodes %}).
 */
export declare interface BarcodeProps extends BaseBarcodeProps {
    /**
     * The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
     *
     * @default "white"
     */
    background?: string;
    /**
     * The border of the Barcode.
     */
    border?: Border;
    /**
     * If set to `true`, the Barcode will display the checksum digit next to the value in the text area.
     *
     * @default false
     */
    checksum?: boolean;
    /**
     * The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
     *
     * @default "black"
     */
    color?: string;
    /**
     * The height of the Barcode in pixels.
     *
     * The Barcode dimensions can also be set through regular CSS styling.
     */
    height?: number;
    /**
     * The padding of the Barcode. A numeric value sets all paddings.
     *
     * @default 0
     */
    padding?: Padding | number;
    /**
     * The Barcode text label configuration.
     */
    text?: BarcodeText;
    /**
     * The symbology (encoding) the Barcode will use.
     *
     * @default "Code39"
     */
    type: BarcodeType | string;
    /**
     * The value of the Barcode.
     */
    value: number | string;
    /**
     * The width of the Barcode in pixels.
     *
     * The Barcode dimensions can also be set through regular CSS styling.
     */
    width?: number;
}

/**
 * The Barcode text label configuration.
 */
export declare interface BarcodeText {
    /**
     * The color of the text. Any valid CSS color string will work here, including hex and rgb.
     *
     * @default "black"
     */
    color?: string;
    /**
     * The font of the text.
     *
     * @default "16px Consolas, Monaco, Sans Mono, monospace, sans-serif"
     */
    font?: string;
    /**
     * The margin of the text. A numeric value sets all margins.
     *
     * @default 0
     */
    margin?: Margin | number;
    /**
     * A flag indicating that the Barcode text label is visible.
     *
     * If set to `false`, the Barcode will not display the value as a text below the barcode lines.
     *
     * @default true
     */
    visible?: boolean;
}

/**
 * Supported symbologies (encodings) for the Barcode component.
 */
export declare type BarcodeType = 'EAN8' | 'EAN13' | 'UPCE' | 'UPCA' | 'Code11' | 'Code39' | 'Code39Extended' | 'Code93' | 'Code93Extended' | 'Code128' | 'Code128A' | 'Code128B' | 'Code128C' | 'GS1-128' | 'MSImod10' | 'MSImod11' | 'MSImod1010' | 'MSImod1110' | 'POSTNET';

/**
 * @hidden
 */
declare interface BaseBarcodeProps {
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * The styles that are applied to the component.
     */
    style?: React.CSSProperties;
    /**
     * Sets additional CSS classes to the component.
     */
    className?: string;
    /**
     * Sets the preferred rendering engine.
     *
     * The supported values are:
     * - `"svg"`&mdash;If available, renders the component as an inline `svg` element.
     * - `"canvas"`&mdash;If available, renders the component as a `canvas` element.
     */
    renderAs?: RenderMode;
}

/**
 * The appearance settings for the border lines.
 */
export declare interface Border {
    /**
     * The color of the border line. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The dash type of the border line.
     */
    dashType?: DashType;
    /**
     * The width of the border line in pixels.
     */
    width?: number;
}

/**
 * The dash line type.
 */
export declare type DashType = 'dash' | 'dashDot' | 'dot' | 'longDash' | 'longDashDot' | 'longDashDotDot' | 'solid';

/**
 * The margin size for each side.
 */
export declare interface Margin {
    /**
     * The top margin in pixels.
     */
    top?: number;
    /**
     * The right margin in pixels.
     */
    right?: number;
    /**
     * The bottom margin in pixels.
     */
    bottom?: number;
    /**
     * The left margin in pixels.
     */
    left?: number;
}

/**
 * The padding size for each side.
 */
export declare interface Padding {
    /**
     * The top padding in pixels.
     */
    top?: number;
    /**
     * The right padding in pixels.
     */
    right?: number;
    /**
     * The bottom padding in pixels.
     */
    bottom?: number;
    /**
     * The left padding in pixels.
     */
    left?: number;
}

/**
 * Represents the KendoReact QRCode component.
 */
export declare class QRCode extends React_2.Component<QRCodeProps, {}> {
    private _baseBarcode;
    /**
     * @hidden
     */
    get barcodeInstance(): any;
    /**
     * The Drawing `Surface` of the Barcode.
     */
    get surface(): Surface | null;
    /**
     * The DOM element of the Barcode.
     */
    get element(): HTMLDivElement | null;
    /**
     * @hidden
     */
    render(): any;
    /**
     * Exports the component as an image. The export operation is asynchronous and returns a promise.
     *
     * @param {ImageExportOptions} options - The parameters for the exported image.
     * @returns {Promise<string>} - A promise that will be resolved with a PNG image encoded as a Data URI.
     */
    exportImage(options?: ImageExportOptions): Promise<string>;
    /**
     * Exports the component as an SVG document. The export operation is asynchronous and returns a promise.
     *
     * @param options - The parameters for the exported file.
     * @returns - A promise that will be resolved with an SVG document that is encoded as a Data URI.
     */
    exportSVG(options?: SVGExportOptions): Promise<string>;
    /**
     * Exports a Barcode component as a Drawing `Scene`.
     *
     * @param {any} options - The parameters for the export operation.
     * @returns {Group} - A promise that returns the root `Group` of the scene.
     */
    exportVisual(options?: any): Group;
    private getTarget;
    private deriveOptionsFromParent;
}

/**
 * The QR Code encoding modes.
 */
export declare type QRCodeEncoding = 'ISO_8859_1' | 'UTF_8';

/**
 * The QR Code error correction levels.
 *
 * * `"L"`&mdash;Approximately 7% of the codewords can be restored.
 * * `"M"`&mdash;Approximately 15% of the codewords can be restored.
 * * `"Q"`&mdash;Approximately 25% of the codewords can be restored.
 * * `"H"`&mdash;Approximately 30% of the codewords can be restored.
 */
export declare type QRCodeErrorCorrection = 'L' | 'M' | 'Q' | 'H';

/**
 * The image overlay configuration of the QR Code.
 */
export declare interface QRCodeOverlay {
    /**
     * The overlay height in pixels.
     */
    height?: number;
    /**
     * The source image for the overlay.
     *
     * Required only when `type` is set to `'image'`.
     */
    imageUrl?: string;
    /**
     * The overlay type.
     *
     * @default 'image'
     */
    type?: 'image' | 'swiss';
    /**
     * The overlay width in pixels.
     */
    width?: number;
}

/**
 * Represents the props of the [KendoReact QRCode component]({% slug overview_qrcode_barcodes %}).
 */
export declare interface QRCodeProps extends BaseBarcodeProps {
    /**
     * The background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
     *
     * @default "white"
     */
    background?: string;
    /**
     * The border of the QR Code.
     */
    border?: Border;
    /**
     * The color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
     *
     * @default "black"
     */
    color?: string;
    /**
     * The encoding mode used to encode the value.
     *
     * > **Important** The UTF-8 encoding is not included in the specifications and is not supported by all readers.
     *
     * The possible values are:
     * * `"ISO_8859_1"`&mdash;Supports all characters from the [ISO/IEC 8859-1](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) character set.
     * * `"UTF_8"`&mdash;Supports all [Unicode](https://en.wikipedia.org/wiki/List_of_Unicode_characters) characters.
     *
     * @default "ISO_8859_1"
     */
    encoding?: QRCodeEncoding;
    /**
     * The error correction level to use.
     *
     * The possible values are:
     * * `"L"`&mdash;Approximately 7% of the codewords can be restored.
     * * `"M"`&mdash;Approximately 15% of the codewords can be restored.
     * * `"Q"`&mdash;Approximately 25% of the codewords can be restored.
     * * `"H"`&mdash;Approximately 30% of the codewords can be restored.
     *
     * @default "L"
     */
    errorCorrection?: QRCodeErrorCorrection;
    /**
     * An optional image overlay that will placed 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"`.
     */
    overlay?: QRCodeOverlay;
    /**
     * The padding of the QR Code. A numeric value sets all paddings.
     *
     * @default 0
     */
    padding?: number;
    /**
     * Specifies the size of a QR Code. Numeric values are treated as pixels.
     *
     * If no size is specified, 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"
     */
    size?: number | string;
    /**
     * The value of the QR Code.
     */
    value: number | string;
}

/**
 * Sets the rendering mode of the component.
 *
 * The supported values are:
 * * `"canvas"`&mdash;Renders the component as a Canvas element.
 * * `"svg"`&mdash;Renders the component as an inline SVG document.
 */
export declare type RenderMode = 'svg' | 'canvas';

export { }