Data
Barcode
Generates a linear barcode (CODE128, CODE39, EAN13, or UPC) for a given value, rendered as an inline SVG.
BarcodePreview
Usage
tsx
import { Barcode } from "@vesture/react";
<Barcode value="5901234123457" format="EAN13" />Behavior
- Client-only, ref-based — renders into an SVG element via jsbarcode, the same category as the chart components' Interactive* variants.
- An invalid value for the selected format (e.g. non-numeric input under EAN13, which requires numeric data) surfaces a clear inline error message instead of crashing or silently rendering garbage.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Required. |
| format | "CODE128" | "CODE39" | "EAN13" | "UPC" | "CODE128" | Encoding format. EAN13/UPC require numeric input of the right length. |
| width / height | number | — | Bar width and overall height in px. Falls back to jsbarcode's own defaults when omitted. |
| displayValue | boolean | true | Shows the human-readable value text below the bars. |