JSX elements

import { Label, Text, Box, Code128, build, mm, dots } from "@zplkit/core/jsx";

JSX shows how to set it up and build labels. Elements take the same options as the Label methods, with x and y instead of position, and text or barcode data as children.

build(element)

Turns a <Label> element, or a component that returns one, into a Label, with toZPL(), lint() and commands. It throws a ZplError for anything else, or for text outside a <Text>.

<Label>

Property	Type	Default	Description
`width`	`Length`		Label width (^PW)
`height`	`Length`		Label height (^LL)
`dpmm`	`6 \| 8 \| 12 \| 24`		Dots per millimeter of the printer: 6, 8, 12 or 24 for 152, 203, 300 or 600 dpi
`reverse?`	`boolean`	`false`	Print the label white on black (^LR)
`characterSet?`	`number`	`28 (UTF-8)`	Character set (^CI)
`home?`	`Position`	`The top left corner`	Where positions are measured from (^LH)
`minify?`	`boolean`	`true`	Leave out line breaks between commands in the output
`copies?`	`number`	`1`	How many copies to print (^PQ)
`speed?`	`number`	`The printer's setting`	Print speed in inches per second, 1 to 14 depending on the printer (^PR)
`darkness?`	`number`	`0`	Darkness relative to the printer's setting, -30 to 30 (^MD)
`children?`	`ZplNode`		The label's elements

<Text>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`file?`	`string`		A font file on the printer instead, like "E:ARIAL.TTF"
`height?`	`Length`		Character height
`width?`	`Length`		Character width
`orientation?`	`Orientation`		Which way the text runs
`direction?`	`"horizontal" \| "reverse" \| "vertical"`	`"horizontal"`	Which way the characters run: across, down (one under the other) or right to left (^FP)
`letterSpacing?`	`Length`	`None`	Extra space between characters (^FP)
`clock?`	`boolean`	`false`	Fill in date and time codes like %Y-%m-%d %H:%M from the printer's clock (^FC)
`block?`	`TextBlockOptions`	`One line`	Wrap the text in a block (^FB)
`serial?`	`SerialOptions`	`The same text on every copy`	Count the text up on each copy, from the number at its end (^SN)
`font?`	`string`	`The label's default font`	One of the printer's fonts, or a font name
`children`	`TextChildren`		The text; characters ZPL would read as commands are escaped

<Box>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`width`	`Length`		Box width
`height`	`Length`		Box height
`thickness`	`Length`		Line thickness; the smaller of width and height draws a solid box
`color?`	`Color`	`"B"`	B for black, W for white
`rounding?`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`0`	How round the corners are, from 0 (square) to 8

<Ellipse>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`width`	`Length`		Ellipse width
`height`	`Length`		Ellipse height
`thickness`	`Length`		Line thickness; half the width or height draws a solid ellipse
`color?`	`Color`	`"B"`	B for black, W for white

<Circle>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`diameter`	`Length`		Circle diameter
`thickness`	`Length`		Line thickness; half the diameter draws a solid circle
`color?`	`Color`	`"B"`	B for black, W for white

Barcodes

<Code11>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`checkDigits?`	`1 \| 2`	`2`	Number of check digits
`children`	`TextChildren`		The data to encode; it's escaped for you

<Code39>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`checkDigit?`	`boolean`	`false`	Add a Mod-43 check digit
`children`	`TextChildren`		The data to encode; it's escaped for you

<Code128>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`useUcc?`	`boolean`	`false`	Add a UCC check digit
`mode?`	`"A" \| "D" \| "N" \| "U"`	`"N"`	N (none), U (UCC case), A (automatic) or D (UCC/EAN)
`children`	`TextChildren`		The data to encode; it's escaped for you

<Interleaved2of5>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`checkDigit?`	`boolean`	`false`	Add a Mod-10 check digit
`children`	`TextChildren`		The data to encode; it's escaped for you

<EAN13>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`children`	`TextChildren`		The data to encode; it's escaped for you

<EAN8>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`children`	`TextChildren`		The data to encode; it's escaped for you

<UpcA>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`printCheckDigit?`	`boolean`	`true`	Print the check digit in the interpretation line
`children`	`TextChildren`		The data to encode; it's escaped for you

<UpcE>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`printCheckDigit?`	`boolean`	`true`	Print the check digit in the interpretation line
`children`	`TextChildren`		The data to encode; it's escaped for you

<UpcEanExtension>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`children`	`TextChildren`		The data to encode; it's escaped for you

<Code93>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`printCheckDigit?`	`boolean`	`false`	Print the two check characters in the interpretation line
`children`	`TextChildren`		The data to encode; it's escaped for you

<Codabar>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`start?`	`"A" \| "B" \| "C" \| "D"`	`"A"`	The start character
`stop?`	`"A" \| "B" \| "C" \| "D"`	`"A"`	The stop character
`children`	`TextChildren`		The data to encode; it's escaped for you

<Industrial2of5>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`children`	`TextChildren`		The data to encode; it's escaped for you

<Standard2of5>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`children`	`TextChildren`		The data to encode; it's escaped for you

<LOGMARS>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`children`	`TextChildren`		The data to encode; it's escaped for you

<MSI>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`checkDigits?`	`"A" \| "B" \| "C" \| "D"`	`"B"`	A for none, B for one Mod 10, C for two Mod 10, D for Mod 11 then Mod 10
`printCheckDigit?`	`boolean`	`false`	Print the check digits in the interpretation line
`children`	`TextChildren`		The data to encode; it's escaped for you

<Plessey>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHri?`	`boolean`	`true`	Print the data as text with the bars
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`printCheckDigit?`	`boolean`	`false`	Print the two check characters in the interpretation line
`children`	`TextChildren`		The data to encode; it's escaped for you

<Postnet>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`printHri?`	`boolean`	`false`	Print the data as text with the bars
`children`	`TextChildren`		The data to encode; it's escaped for you

<Planet>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Bar height
`printHriAbove?`	`boolean`	`false`	Print that text above the bars instead of below
`printHri?`	`boolean`	`false`	Print the data as text with the bars
`children`	`TextChildren`		The data to encode; it's escaped for you

<IntelligentMail>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`height?`	`Length`	`The height set with ^BY`	Height of the tallest bars
`children`	`TextChildren`		The data to encode; it's escaped for you

<GS1DataBar>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`type?`	`union`	`"omnidirectional"`	Which GS1 DataBar
`moduleSize?`	`Length`	`2 dots, 3 at 300 dpi and 6 at 600 dpi`	Size of a module, 1 to 10 dots
`separatorHeight?`	`1 \| 2`	`1`	Height of the separator rows in stacked symbols, in modules
`segments?`	`number`	`22`	Segments per row for Expanded, an even number from 2 to 22
`children`	`TextChildren`		The data to encode; it's escaped for you

<MicroPDF417>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`rowHeight?`	`Length`	`The height set with ^BY`	Height of each row
`mode?`	`number`	`0`	0 to 33, which sets the columns, rows and error correction; the reference lists them
`children`	`TextChildren`		The data to encode; it's escaped for you

<PDF417>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`rowHeight?`	`Length`	`The height set with ^BY`	Height of each row
`securityLevel?`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`0`	Error correction level, from 0 (detection only) to 8
`columns?`	`number`		Number of data columns, 1 to 30
`rows?`	`number`		Number of rows, 3 to 90
`truncate?`	`boolean`	`false`	Leave out the right row indicators and stop pattern
`children`	`TextChildren`		The data to encode; it's escaped for you

<DataMatrix>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`moduleSize`	`Length`		Size of each square module
`quality?`	`0 \| 50 \| 80 \| 100 \| 140 \| 200`	`200 (ECC 200)`	Error correction level
`columns?`	`number`		Number of columns
`rows?`	`number`		Number of rows
`formatId?`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`		Format ID, not used with quality 200
`escapeCharacter?`	`string`		Escape sequence control character
`children`	`TextChildren`		The data to encode; it's escaped for you

<QrCode>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`moduleSize?`	`Length`	`The printer's default for its resolution`	Size of each square module
`errorCorrection?`	`"H" \| "L" \| "M" \| "Q"`	`"M"`	H (highest), Q, M (standard) or L (densest)
`children`	`TextChildren`		The data to encode; it's escaped for you

<Aztec>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`orientation?`	`Orientation`		Which way the barcode runs
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`moduleSize?`	`Length`	`The printer's default for its resolution`	Size of each square module, 1 to 10 dots
`errorControl?`	`number`		Error correction percentage (1 to 99), or 101 to 104 for a compact symbol and 201 to 232 for a full-range one with that many layers
`children`	`TextChildren`		The data to encode; it's escaped for you

<MaxiCode>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`serial?`	`SerialOptions`	`The same data on every copy`	Count the data up on each copy, from the number at its end (^SN)
`mode?`	`2 \| 3 \| 4 \| 5 \| 6`	`2`	2 or 3 for carrier messages with a numeric or alphanumeric postal code, 4 to 6 for other data. In modes 2 and 3 the data starts with the class of service, country code and postal code.
`children`	`TextChildren`		The data to encode; it's escaped for you

Images

<Graphic>

Property	Type	Description
`x`	`Length`	Distance from the left
`y`	`Length`	Distance from the top
`graphic`	`Graphic`	The image, for example from ImageConverter

<StoredGraphic>

Property	Type	Default	Description
`x`	`Length`		Distance from the left
`y`	`Length`		Distance from the top
`name`	`string`		Name of the graphic on the printer
`device?`	`StorageDevice`	`"R"`	Where the graphic is stored: R (DRAM), E (flash), B or A
`magnification?`	`object`	`\{ x: 1, y: 1 \}`	How many times larger to print it, across and down

Other elements

<Field>

A field with any command, for elements without their own component.

Property	Type	Description
`x`	`Length`	Distance from the left
`y`	`Length`	Distance from the top
`command`	`union`	The command(s) for the field, added as written, like "^B3N,N,100,Y,N"
`children?`	`TextChildren`	Field data, if the command needs any; it's escaped for you

<DefaultFont>

The font (^CF) for text that follows and doesn't set one.

Property	Type	Description
`font`	`string`	One of the printer's fonts, like ZebraFontFamily.ZERO, or a font name
`height?`	`Length`	Character height
`width?`	`Length`	Character width

<FieldOrientation>

The orientation (^FW) of the fields that follow and don't give one.

Property	Type	Description
`orientation`	`Orientation`	Orientation of the fields that follow

<Raw>

Plain ZPL, added as written. Nothing is escaped, so keep user input out.

Property	Type	Description
`zpl`	`string`	ZPL added as written

build(element)Copy Anchor Link

<Label>Copy Anchor Link

<Text>Copy Anchor Link

<Box>Copy Anchor Link

<Ellipse>Copy Anchor Link

<Circle>Copy Anchor Link

BarcodesCopy Anchor Link

<Code11>Copy Anchor Link

<Code39>Copy Anchor Link

<Code128>Copy Anchor Link

<Interleaved2of5>Copy Anchor Link

<EAN13>Copy Anchor Link

<EAN8>Copy Anchor Link

<UpcA>Copy Anchor Link

<UpcE>Copy Anchor Link

<UpcEanExtension>Copy Anchor Link

<Code93>Copy Anchor Link

<Codabar>Copy Anchor Link

<Industrial2of5>Copy Anchor Link

<Standard2of5>Copy Anchor Link

<LOGMARS>Copy Anchor Link

<MSI>Copy Anchor Link

<Plessey>Copy Anchor Link

<Postnet>Copy Anchor Link

<Planet>Copy Anchor Link

<IntelligentMail>Copy Anchor Link

<GS1DataBar>Copy Anchor Link

<MicroPDF417>Copy Anchor Link

<PDF417>Copy Anchor Link

<DataMatrix>Copy Anchor Link

<QrCode>Copy Anchor Link

<Aztec>Copy Anchor Link

<MaxiCode>Copy Anchor Link

ImagesCopy Anchor Link

<Graphic>Copy Anchor Link

<StoredGraphic>Copy Anchor Link

Other elementsCopy Anchor Link

<Field>Copy Anchor Link

<DefaultFont>Copy Anchor Link

<FieldOrientation>Copy Anchor Link

<Raw>Copy Anchor Link

On this page