@progress/kendo-react-barcodes
Version:
React Barcodes provide a set of React components to build beautiful and customizable barcodes. KendoReact Barcodes package
92 lines (91 loc) • 2.95 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 { BarcodeText, BarcodeType, Border, Padding } from './types.js';
/**
* Represents the props of the [KendoReact Barcode component](https://www.telerik.com/kendo-react-ui/components/barcodes/barcode).
*/
export interface BarcodeProps extends BaseBarcodeProps {
/**
* Sets the background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
*
* @default "white"
* @example
* <Barcode background="#ffffff" />
*/
background?: string;
/**
* Sets the border of the Barcode. Accepts an object implementing the `Border` interface.
*
* @example
* <Barcode border={{ color: "black", width: 2 }} />
*/
border?: Border;
/**
* Shows or hides the checksum digit next to the value in the text area.
*
* @default false
* @example
* <Barcode checksum={true} />
*/
checksum?: boolean;
/**
* Sets the color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
*
* @default "black"
* @example
* <Barcode color="#000000" />
*/
color?: string;
/**
* Sets the height of the Barcode in pixels.
* You can also set the Barcode dimensions through regular CSS styling.
*
* @example
* <Barcode height={100} />
*/
height?: number;
/**
* Sets the padding of the Barcode. Accepts a numeric value or an object implementing the `Padding` interface.
*
* @default 0
* @example
* <Barcode padding={{ top: 10, bottom: 10, left: 5, right: 5 }} />
*/
padding?: Padding | number;
/**
* Sets the text label configuration of the Barcode. Accepts an object implementing the `BarcodeText` interface.
*
* @example
* <Barcode text={{ visible: true, position: "bottom", color: "black" }} />
*/
text?: BarcodeText;
/**
* Sets the symbology (encoding) that the Barcode will use. Accepts a value of type `BarcodeType` or a custom string.
*
* @default "Code39"
* @example
* <Barcode type="Code128" />
*/
type: BarcodeType | string;
/**
* Sets the value of the Barcode. Accepts a string or a number.
*
* @example
* <Barcode value="123456789" />
*/
value: number | string;
/**
* Sets the width of the Barcode in pixels.
* You can also set the Barcode dimensions through regular CSS styling.
*
* @example
* <Barcode width={200} />
*/
width?: number;
}