Barcode Scanner component for browser.style
npm install @browser.style/barcode-scannerA web component that works with most barcode scanners, supporting both automatic and manual barcode entry.
``bash`
npm install @browser.style/barcode-scanner
`javascript`
import '@browser.style/barcode-scanner';
`html`
Click the icon to start scanning, or add the auto attribute to start automatically.
- auto: Start scanning immediately when page loadsclear
- : Display duration in ms (default: 2000)debug
- : Show scan history in consoleinput
- : Show input field for manual entrymaxlength
- : Max digits in barcode (default: 14, min: 8)minlength
- : Min digits in barcode (default: 8)terminate-char
- : Scanner termination char (default: '\n')styles
- : Use default component styles
The component emits two events:
- bs:entry: Triggered on successful scan`javascript`
scanner.addEventListener('bs:entry', event => {
console.log('Barcode:', event.detail.value);
});bs:clear
- : Can be dispatched to clear display
`html`
Access values:
`javascript`
const form = document.querySelector('form');
const scanner = form.elements.scanner;
console.log(scanner.value); // Last scanned barcode
With debug attribute, scan history shows:
- Timestamp
- Barcode value
- Source (scanner/manual)
Enable manual input with the input attribute:`html``