New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
barcode-scan-js
Advanced tools
barcode-scan-js - npm Package Compare versions
Comparing version 0.0.6 to 0.0.7
| { | ||
| "name": "barcode-scan-js", | ||
| "version": "0.0.6", | ||
| "version": "0.0.7", | ||
| "repository": "https://github.com/NanFengCheong/barcode-scan-js", | ||
@@ -5,0 +5,0 @@ "description": "JavaScript browser-based scanner keyboard input library for seamless integration of barcode and QR code scanning into web applications", |
115
readme.md
@@ -1,21 +0,21 @@ | ||
| # Barcode Scan JavaScript Library | ||
| ### Barcode-Scan Custom Element | ||
| A JavaScript library for integrating barcode and QR code scanning into web applications using a scanner-like keyboard input. This library provides a customizable element, `barcode-scan`, that can be easily integrated into your web projects. | ||
| 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. | ||
| ## Features | ||
| #### Installation | ||
| - Seamless integration of barcode and QR code scanning into web applications. | ||
| - Customizable configuration for different scanning requirements. | ||
| - Event-driven architecture for handling scan results. | ||
| - Supports specifying minimum and maximum barcode lengths. | ||
| - Ignores specified input elements to prevent interference with user input. | ||
| You can install the `barcode-scan` custom element via npm: | ||
| ## Installation | ||
| ```bash | ||
| npm install barcode-scan-js | ||
| ``` | ||
| ## Usage | ||
| #### Stackblitz Demo | ||
| 1. Import the library in your HTML file: | ||
| https://stackblitz.com/edit/js-j8zukx?file=index.js,index.html | ||
| #### Usage | ||
| 1. Include the `barcode-scan` custom element in your HTML file: | ||
| ```html | ||
@@ -25,59 +25,78 @@ <!DOCTYPE html> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Barcode Scan Demo</title> | ||
| <!-- ... --> | ||
| </head> | ||
| <body> | ||
| <!-- Add the barcode-scan element --> | ||
| <barcode-scan></barcode-scan> | ||
| <script src="main.js"></script> | ||
| <!-- ... --> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| 2. Use the `<barcode-scan>` element in your HTML: | ||
| 2. Configure the element by setting its attributes or properties. You can configure it using a JSON string in the `config` attribute. Here's an example configuration: | ||
| ```html | ||
| <barcode-scan config='{"minLength": 4, "maxLength": 12, "toUpper": true}'></barcode-scan> | ||
| <barcode-scan config='{"minLength": 8, "maxLength": 12, "scanEndsWithKey": "Enter"}'></barcode-scan> | ||
| ``` | ||
| 3. Add an event listener in your JavaScript to capture scan results: | ||
| The available configuration options are: | ||
| ```javascript | ||
| // Import the library | ||
| import 'barcode-scan-js'; | ||
| - `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"]). | ||
| // Get a reference to the barcode-scan element | ||
| const barcodeScanner = document.querySelector('barcode-scan'); | ||
| 3. Listen for the `scan` event to receive barcode scan results: | ||
| // Add an event listener to capture scan results | ||
| barcodeScanner.addEventListener('scan', (event) => { | ||
| const scanResult = event.detail; | ||
| // Handle the scan result here | ||
| console.log('Scanned Barcode:', scanResult.code); | ||
| console.log('Is Valid:', scanResult.isValid); | ||
| console.log('Time Taken (ms):', scanResult.timeTakenMs); | ||
| console.log('Cleaned Code:', scanResult.cleanedCode); | ||
| ```javascript | ||
| 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}`); | ||
| } | ||
| }); | ||
| ``` | ||
| ## Configuration | ||
| The `scan` event provides detailed information about the scanned barcode, including its code, length, validity, time taken to scan, cleaned code, and configuration. | ||
| The `<barcode-scan>` element supports the following configuration options: | ||
| 4. That's it! You can now use the `barcode-scan` custom element to scan and validate barcodes in your web application. | ||
| - `minLength`: Minimum length of the scanned barcode (default: 1). | ||
| - `maxLength`: Maximum length of the scanned barcode (default: 14). | ||
| - `codeStartsWith`: Start of the barcode string (default: empty string). | ||
| - `codeEndsWith`: End of the barcode string (default: empty string). | ||
| - `scanTimeoutMs`: Timeout (in milliseconds) to consider the input as a scan (default: 3000ms). | ||
| - `ignoreOverElements`: An array of HTML tag names to ignore when scanning (default: `['INPUT']`). | ||
| - `toUpper`: Convert scanned text to uppercase (default: false). | ||
| ### Example | ||
| ## License | ||
| Here's a simple example of how to use the `barcode-scan` custom element in an HTML file: | ||
| This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. | ||
| ```html | ||
| <!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> | ||
| Feel free to modify and expand this README to suit your project's specific needs. | ||
| <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. |
| { | ||
| "$schema": "https://json.schemastore.org/tsconfig", | ||
| "display": "Node 18", | ||
| "compilerOptions": { | ||
@@ -9,12 +7,11 @@ "lib": ["es2022", "DOM"], | ||
| "target": "es2022", | ||
| "strict": true, | ||
| "declaration": true, | ||
| "declarationMap": true, | ||
| "esModuleInterop": true, | ||
| "skipLibCheck": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "outDir": "lib" | ||
| }, | ||
| "include": ["src/**/*"] | ||
| } |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by26.3%
16966
- Number of package files
- increased by50%
9
- Lines of code
- increased by12.92%
271
- Number of lines in readme file
- increased by23.17%
101
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes