New to KendoReact? Start a free 30-day trial

BarcodeProps

Interface

Represents the props of the KendoReact Barcode component.

Definition

Package:@progress/kendo-react-barcodes

Properties

background?

string

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

Default:

"white"

Example:

<Barcode background="#ffffff" />

border?

Border

Sets the border of the Barcode. Accepts an object implementing the Border interface.

Example:

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

checksum?

boolean

Shows or hides the checksum digit next to the value in the text area.

Default:

false

Example:

<Barcode checksum={true} />

className?

string

Sets additional CSS classes to the component.

Example:

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

color?

string

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

Default:

"black"

Example:

<Barcode color="#000000" />

height?

number

Sets the height of the Barcode in pixels. You can also set the Barcode dimensions through regular CSS styling.

Example:

<Barcode height={100} />

padding?

number | Padding

Sets the padding of the Barcode. Accepts a numeric value or an object implementing the Padding interface.

Default:

Example:

<Barcode padding={{ top: 10, bottom: 10, left: 5, right: 5 }} />

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" />

style?

CSSProperties

Sets the styles that the component applies.

Example:

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

text?

BarcodeText

Sets the text label configuration of the Barcode. Accepts an object implementing the BarcodeText interface.

Example:

<Barcode text={{ visible: true, position: "bottom", color: "black" }} />

type

string

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" />

value

string | number

Sets the value of the Barcode. Accepts a string or a number.

Example:

<Barcode value="123456789" />

width?

number

Sets the width of the Barcode in pixels. You can also set the Barcode dimensions through regular CSS styling.

Example:

<Barcode width={200} />