barcode-scan-js

keyscanjs

keyscanjs is a JavaScript library that allows you to easily integrate barcode and QR code scanning into your web applications using a scanner or keyboard input.

Installation

You can install keyscanjs via npm:

npm install keyscanjs

Usage

1. Import the library:

import 'keyscanjs';

1. Create a <key-scan> element in your HTML to enable barcode scanning:

<key-scan></key-scan>

1. Customize the scanner's behavior by setting attributes on the <key-scan> element:

<key-scan
  config='{
    "minLength": 1,
    "maxLength": 14,
    "codeStartsWith": "",
    "codeEndsWith": "",
    "scanTimeoutMs": 3000,
    "ignoreOverElements": ["INPUT"],
    "toUpper": false
  }'
></key-scan>

1. Listen for the scan event to capture scanned data:

document.querySelector('key-scan').addEventListener('scan', (event) => {
  const scanData = event.detail;
  // Handle the scanned data here
});

Configuration

You can configure the scanner's behavior by setting attributes on the <key-scan> element:

• minLength (default: 1): Minimum length of a valid scan.
• maxLength (default: 14): Maximum length of a valid scan.
• codeStartsWith (default: ""): Prefix for the scanned code.
• codeEndsWith (default: ""): Suffix for the scanned code.
• scanTimeoutMs (default: 3000): Maximum time (in milliseconds) allowed between key presses for a valid scan.
• ignoreOverElements (default: ["INPUT"]): An array of HTML tag names to ignore when scanning is active.
• toUpper (default: false): Convert scanned data to uppercase.

Example

<key-scan
  config='{
    "minLength": 4,
    "maxLength": 12,
    "codeStartsWith": "",
    "codeEndsWith": "ENTER",
    "scanTimeoutMs": 2000,
    "ignoreOverElements": ["INPUT", "TEXTAREA"],
    "toUpper": true
  }'
></key-scan>

Contributing

Feel free to contribute to this project by opening issues or submitting pull requests. We welcome your feedback and contributions.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

You can expand on this README by adding more details about the library's features, how to handle scan data, and any other relevant information.