barcode-scan-js
Advanced tools
JavaScript browser-based scanner keyboard input library for seamless integration of barcode and QR code scanning into web applications
The barcode-scan custom element is designed to simplify the process of scanning and validating barcodes in web applications. It listens for keyboard input and triggers a custom event, providing information about the scanned barcode's validity and other details.
You can install the barcode-scan custom element via npm:
npm install barcode-scan-js
https://stackblitz.com/edit/js-j8zukx?file=index.js,index.html
barcode-scan custom element in your HTML file:<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<barcode-scan></barcode-scan>
<!-- ... -->
</body>
</html>
config attribute. Here's an example configuration:<barcode-scan config='{"minLength": 8, "maxLength": 12, "scanEndsWithKey": "Enter"}'></barcode-scan>
The available configuration options are:
minLength (optional): The minimum length of a valid barcode (default: 1).maxLength (optional): The maximum length of a valid barcode (default: 14).scanEndsWithKey (optional): The key that indicates the end of a barcode scan (default: empty string).scanTimeoutMs (optional): The timeout (in milliseconds) to consider the input as a complete barcode (default: 3000).ignoreOverElements (optional): An array of HTML tag names to ignore when scanning (default: ["INPUT"]).scan event to receive barcode scan results:document.querySelector('barcode-scan').addEventListener('scan', (event) => {
const scanResult = event.detail;
if (scanResult.isValid) {
console.log(`Valid barcode scanned: ${scanResult.code}`);
} else {
console.error(`Invalid barcode scanned: ${scanResult.code}, Error: ${scanResult.errorMessage}`);
}
});
The scan event provides detailed information about the scanned barcode, including its code, length, validity, time taken to scan, cleaned code, and configuration.
barcode-scan custom element to scan and validate barcodes in your web application.Here's a simple example of how to use the barcode-scan custom element in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Scanner</title>
</head>
<body>
<h1>Barcode Scanner</h1>
<barcode-scan config='{"minLength": 6, "maxLength": 10, "scanEndsWithKey": "Enter"}'></barcode-scan>
<div id="scan-result"></div>
<script>
const scanResultElement = document.getElementById('scan-result');
document.querySelector('barcode-scan').addEventListener('scan', (event) => {
const scanResult = event.detail;
if (scanResult.isValid) {
scanResultElement.innerHTML = `Valid barcode scanned: ${scanResult.code}`;
} else {
scanResultElement.innerHTML = `Invalid barcode scanned: ${scanResult.code}, Error: ${scanResult.errorMessage}`;
}
});
</script>
</body>
</html>
This example sets up the barcode-scan custom element with a configuration and listens for the scan event to display the scan result on the page.
Feel free to customize the configuration and event handling to fit your specific barcode scanning needs.
FAQs
JavaScript browser-based scanner keyboard input library for seamless integration of barcode and QR code scanning into web applications
The npm package barcode-scan-js receives a total of 2 weekly downloads. As such, barcode-scan-js popularity was classified as not popular.
We found that barcode-scan-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.