JSX

Labels can also be written as JSX. It produces the same commands as the method calls, and build() returns the same Label object, with toZPL(), lint() and commands.

import { Label, Text, Box, Code128, build, mm, dots } from "node-zpl/jsx";

const order = { id: 10442, express: true };

const label = build(
  <Label width={mm(101.6)} height={mm(50.8)} dpmm={8}>
    <Text x={mm(5)} y={mm(5)} height={mm(7)}>
      Order #{order.id}
    </Text>
    <Box x={mm(5)} y={mm(16)} width={mm(91)} height={dots(3)} thickness={dots(3)} />
    <Code128 x={mm(5)} y={mm(20)} height={mm(13)}>
      {`ORD-${order.id}`}
    </Code128>
    {order.express && (
      <Text x={mm(66)} y={mm(5)} height={mm(7)}>
        EXPRESS
      </Text>
    )}
  </Label>
);

label.toZPL();

Text and barcode data go in children. false, null and undefined children are skipped, and lists from .map() work. Elements can be reused in labels with different resolutions, since millimeters are converted when the label is built.

Your own componentsCopy Anchor Link

Components are plain functions that return elements:

// Position in millimeters, so lines can be placed relative to it
const ReturnAddress = (props: { x: number; y: number }) => (
  <>
    <Text x={mm(props.x)} y={mm(props.y)} height={mm(3)}>Harbor Parts Co.</Text>
    <Text x={mm(props.x)} y={mm(props.y + 4)} height={mm(3)}>1000 Shipping Lane</Text>
  </>
);

// <ReturnAddress x={5} y={40} />

build() also accepts a component that returns a <Label>, like build(<ShippingLabel order={order} />).

SetupCopy Anchor Link

React projectsCopy Anchor Link

No setup is needed. Label elements also work when compiled by React's JSX runtime, so labels can live next to your React components. Label components are plain functions that build() calls, not React components, so hooks and context don't work inside them.

Without ReactCopy Anchor Link

Tell TypeScript or your bundler to use node-zpl's JSX runtime:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "node-zpl"
  }
}

Vue, Svelte and AngularCopy Anchor Link

Their templates aren't JSX, so use the method calls in a .ts file. If your build tool compiles .tsx files (Vite does), you can also keep labels in a .tsx file that starts with /** @jsxImportSource node-zpl */.