Barcode

Code

import { Barcode } from "@fadymondy/nasaq/web";export function Label({ sku }: { sku: string }) {  return <Barcode value={sku} format="CODE128" downloadable downloadName={sku} />;}

Utilities · beta

Live examples and controls: Barcode in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/barcode.json

A barcode as inline SVG. jsbarcode draws the bars; Nasaq checks the value first, so a bad EAN shows why ("needs 13 digits", "check digit should be 1") instead of a blank or broken image.

When to useCopy Anchor Link

• Product, asset and order labels.
• A generator for staff who print their own codes.

When not to useCopy Anchor Link

• Links or free text for phones: use QrCode.
• Anything secret: a barcode is plain data.

ImportCopy Anchor Link

import { Barcode, BarcodeGenerator } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Barcode } from "@fadymondy/nasaq/web";

export function Label({ sku }: { sku: string }) {
  return <Barcode value={sku} format="CODE128" downloadable downloadName={sku} />;
}

AnatomyCopy Anchor Link

Barcode                         data-slot="barcode"
├─ error message                role="alert" (when the value is invalid)
├─ svg                          data-slot="barcode-svg" (role="img")
└─ actions (downloadable)       data-slot="barcode-actions": Download SVG, Download PNG
BarcodeGenerator                data-slot="barcode-generator" (Card): value, format, preview

APICopy Anchor Link

Barcode: every div prop except children, plus:

BarcodeGenerator: defaultValue, defaultFormat, formats, downloadName, labels.

Helpers (pure, tested): validateBarcode(format, value) returns { kind, ... } or null; gtinCheckDigit(digitsWithoutCheck).

ExamplesCopy Anchor Link

Validate before saving

import { validateBarcode } from "@fadymondy/nasaq/web";

export const ok = validateBarcode("EAN13", "4006381333931") === null;

Only retail formats in the generator

import { BarcodeGenerator } from "@fadymondy/nasaq/web";

export const Retail = () => <BarcodeGenerator formats={["EAN13", "EAN8", "UPC"]} defaultFormat="EAN13" defaultValue="4006381333931" />;

AccessibilityCopy Anchor Link

• The SVG is role="img" with a name that includes the format and value. Errors are role="alert".
• Bars need contrast and a quiet zone: keep the default margin.

RTL & i18nCopy Anchor Link

• Bars and digits are always left-to-right (dir="ltr"), also in Arabic. The generator UI mirrors and has Arabic strings.

Styling & tokensCopy Anchor Link

• Black on white by default so scanners read it. Tokens resolve to concrete colours at download time.
• Target [data-slot="barcode"], [data-slot="barcode-svg"].

Do / Don'tCopy Anchor Link

• Do let the check digit be computed for you with gtinCheckDigit when you generate EANs.
• Do print at least the size the format standard asks for.
• Don't stretch the SVG unevenly: it changes the bar ratio.

RelatedCopy Anchor Link

• QrCode

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-utilities-barcode--docs