UI: Components

Barcode Scanner

A Web Component that works with most barcode scanners.
Click the icon in the bottom right corner to start scanning, or add the auto attribute to start automatically.

How to Use

1. Add the component to your page: <barcode-scanner></barcode-scanner>
2. Import and mount: import { BarcodeScanner } from './index.js';
   Then run BarcodeScanner.mount();
3. Listen for scanned barcodes: element.addEventListener('bs:entry', event => ...)

Settings (Attributes)

auto

Starts scanning immediately when page loads

clear

How long to show the scanned barcode (in milliseconds)
Example: clear="5000" (default: 2 seconds)

debug

Shows a history of all scanned barcodes in the browser console

input

Shows the barcode input, allowing for manual entries (press Enter to execute).

maxlength

Maximum number of digits required in barcode
Example: maxlength="12" (default: 14, minimum: 8)

minlength

Minimum number of digits required in barcode
Example: minlength="10" (default: 8, cannot exceed maxlength)

terminate-char

The character your scanner sends after reading a barcode
Example: terminate-char="\n" (default: Enter key)

Events

bs:entry

Triggered when a barcode is successfully scanned.
The barcode value is in event.detail.value

bs:clear

Send this event to manually clear the display

Example

<barcode-scanner auto debug input>
</barcode-scanner>

If you don't have a barcode-scanner, you can manually type a barcode and press Enter.
See the console for debug information.