@4efficiency/react-barcode-reader 1.0.0

package/README.md

@@ -0,0 +1,99 @@
+## Introduction
+A [React](https://facebook.github.io/react/) component for reading barcode and QR codes from devices that are represent as keyboard to the system.
+
+This is a conversion to typescript fork of https://kybarg.github.io/react-barcode-reader/
+
+
+## Demo
+to come maybe
+
+## Install
+`npm install --save @4efficiency/react-barcode-reader`
+
+## Example
+
+```js
+import React, {useState} from 'react'
+import BarcodeReader from '@4efficiency/react-barcode-reader'
+
+const Test  = ()=> {
+  const [result,setResult] = useState<string>("No result")
+      
+    const handleScan = (data)=>{
+    setResult(data)
+  }
+  const handleError = (err) =>{
+    console.error(err)
+  }
+  
+
+    return(
+      <div>
+        <BarcodeReader
+          onError={handleError}
+          onScan={handleScan}
+          />
+        <p>{this.state.result}</p>
+      </div>
+    )
+    
+}
+```
+
+## Props
+| Prop | Type | Default Value | Description |
+|---|---|---|---|
+| onScan | func |  | Callback after detection of a successfull scanning (scanned string in parameter) |
+| onError | func |  | Callback after detection of a unsuccessfull scanning (scanned string in parameter) |
+| onReceive | func |  | Callback after receiving and processing a char (scanned char in parameter)
+| onKeyDetect | func |  | Callback after detecting a keyDown (key char in parameter) - in contrast to onReceive, this fires for non-character keys like tab, arrows, etc. too!
+| timeBeforeScanTest | number | 100 | Wait duration (ms) after keypress event to check if scanning is finished
+| avgTimeByChar | number | 30 | Average time (ms) between 2 chars. Used to do difference between keyboard typing and scanning
+| minLength | number | 6 | Minimum length for a scanning
+| endChar | [number] | [9, 13] | Chars to remove and means end of scanning
+| startChar | [number] | [] | Chars to remove and means start of scanning
+| scanButtonKeyCode | number |  | Key code of the scanner hardware button (if the scanner button a acts as a key itself)
+| scanButtonLongPressThreshold | number | 3 | How many times the hardware button should issue a pressed event before a barcode is read to detect a longpress
+| onScanButtonLongPressed | func |  | Callback after detection of a successfull scan while the scan button was pressed and held down
+| stopPropagation | bool | false | Stop immediate propagation on keypress event
+| preventDefault | bool | false | Prevent default action on keypress event
+| testCode | string |  | Test string for simulating
+| splitPattern |  RegExp | | Optional regexp to split scans into multiple events 
+
+## Dev
+
+### Install dependencies
+`npm install`
+
+### Build
+`npm run build`
+
+
+### Test
+`npm test`
+
+### Linting
+`npm run lint`
+
+## License
+The MIT License (MIT)
+
+Copyright (c) 2025 4Efficiency Services B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Props interface for the BarcodeScanner component.
+ * Configures barcode/QR code scanning behavior from keyboard input devices.
+ */
+export interface BarcodeScannerProps {
+    /**
+     * Callback invoked after successful barcode detection.
+     * @param code - The scanned barcode string
+     * @param scanButtonCounter - Number of times the scan button was pressed
+     */
+    onScan?: (code: string, scanButtonCounter: number) => void;
+    /**
+     * Callback invoked after unsuccessful barcode detection.
+     * @param code - The attempted scan string
+     * @param error - Error message describing why the scan failed
+     */
+    onError?: (code: string, error: string) => void;
+    /**
+     * Callback invoked after receiving and processing each character.
+     * @param e - The keyboard event for the processed character
+     */
+    onReceive?: (e: KeyboardEvent) => void;
+    /**
+     * Callback invoked after detecting any keydown event.
+     * Unlike onReceive, this fires for non-character keys like Tab, Enter, arrows, etc.
+     * @param e - The keyboard event that was detected
+     */
+    onKeyDetect?: (e: KeyboardEvent) => void;
+    /**
+     * Wait duration in milliseconds after the last keypress before testing if scanning is complete.
+     * @default 100
+     */
+    timeBeforeScanTest?: number;
+    /**
+     * Average time in milliseconds between two characters during a scan.
+     * Used to differentiate between manual keyboard typing and barcode scanner input.
+     * @default 30
+     */
+    avgTimeByChar?: number;
+    /**
+     * Minimum number of characters required for a valid scan.
+     * @default 6
+     */
+    minLength?: number;
+    /**
+     * Array of character codes that indicate the end of a scan and should be removed from the result.
+     * @default [9, 13] (Tab and Enter)
+     */
+    endChar?: number[];
+    /**
+     * Array of character codes that indicate the start of a scan and should be removed from the result.
+     * @default []
+     */
+    startChar?: number[];
+    /**
+     * Key code of the scanner hardware button if the scanner button acts as a key itself.
+     */
+    scanButtonKeyCode?: number;
+    /**
+     * Number of times the hardware scan button must be pressed before considering it a long press.
+     * @default 3
+     */
+    scanButtonLongPressThreshold?: number;
+    /**
+     * Callback invoked after successful scan detection when the scan button was held down (long press).
+     * @param code - The scanned barcode string
+     * @param scanButtonCounter - Number of times the scan button was pressed
+     */
+    onScanButtonLongPressed?: (code: string, scanButtonCounter: number) => void;
+    /**
+     * If true, stops immediate propagation of keypress events.
+     * @default false
+     */
+    stopPropagation?: boolean;
+    /**
+     * If true, prevents default action on keypress events.
+     * @default false
+     */
+    preventDefault?: boolean;
+    /**
+     * Test string for simulating a barcode scan without physical scanner input.
+     */
+    testCode?: string;
+    /**
+     * Optional regular expression pattern to split concatenated scans into multiple scan events.
+     * When provided, matched groups will trigger separate onScan callbacks.
+     */
+    splitPattern?: RegExp;
+}
+declare function BarcodeScanner(props: BarcodeScannerProps): null;
+export default BarcodeScanner;

package/dist/index.js

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useRef } from "react";
+function isContentEditable(element) {
+    const anyEl = element;
+    if (typeof anyEl.getAttribute !== "function") {
+        return false;
+    }
+    return !!anyEl.getAttribute("contenteditable");
+}
+function isInput(element) {
+    if (!element)
+        return false;
+    const el = element;
+    const { tagName } = el;
+    const editable = isContentEditable(el);
+    return tagName === "INPUT" || tagName === "TEXTAREA" || editable;
+}
+function inIframe() {
+    try {
+        return window.self !== window.top;
+    }
+    catch {
+        return true;
+    }
+}
+function BarcodeScanner(props) {
+    // Mutable refs for internal state previously kept as fields
+    const firstCharTimeRef = useRef(0);
+    const lastCharTimeRef = useRef(0);
+    const stringWritingRef = useRef("");
+    const callIsScannerRef = useRef(false);
+    const testTimerRef = useRef(false);
+    const scanButtonCounterRef = useRef(0);
+    // Defaults equivalent to previous defaultProps
+    const { onScan, onError, onReceive, onKeyDetect, timeBeforeScanTest = 100, avgTimeByChar = 30, minLength = 6, endChar = [9, 13], startChar = [], scanButtonKeyCode, scanButtonLongPressThreshold = 3, onScanButtonLongPressed, stopPropagation = false, preventDefault = false, testCode, splitPattern, } = props;
+    const initScannerDetection = () => {
+        // Reset all state between scans to avoid cross-scan interference
+        firstCharTimeRef.current = 0;
+        lastCharTimeRef.current = 0;
+        stringWritingRef.current = "";
+        scanButtonCounterRef.current = 0;
+        callIsScannerRef.current = false;
+        if (testTimerRef.current) {
+            clearTimeout(testTimerRef.current);
+            testTimerRef.current = false;
+        }
+    };
+    const emitScans = useCallback((payload) => {
+        if (!onScan)
+            return;
+        if (splitPattern) {
+            const matches = payload.match(splitPattern);
+            if (matches && matches.length > 0) {
+                for (const m of matches) {
+                    onScan(m, scanButtonCounterRef.current || 1);
+                }
+                return;
+            }
+        }
+        onScan(payload, scanButtonCounterRef.current || 1);
+    }, [onScan, splitPattern]);
+    const scannerDetectionTest = useCallback((s) => {
+        // If string is given, test it
+        if (s) {
+            firstCharTimeRef.current = 0;
+            lastCharTimeRef.current = 0;
+            stringWritingRef.current = s;
+        }
+        if (!scanButtonCounterRef.current) {
+            scanButtonCounterRef.current = 1;
+        }
+        if (stringWritingRef.current.length >= minLength &&
+            lastCharTimeRef.current - firstCharTimeRef.current < stringWritingRef.current.length * avgTimeByChar) {
+            if (onScanButtonLongPressed && scanButtonCounterRef.current > scanButtonLongPressThreshold) {
+                onScanButtonLongPressed(stringWritingRef.current, scanButtonCounterRef.current);
+            }
+            else {
+                emitScans(stringWritingRef.current);
+            }
+            initScannerDetection();
+            return true;
+        }
+        let errorMsg = "";
+        if (stringWritingRef.current.length < minLength) {
+            errorMsg = `String length should be greater or equal ${minLength}`;
+        }
+        else if (lastCharTimeRef.current - firstCharTimeRef.current > stringWritingRef.current.length * avgTimeByChar) {
+            errorMsg = `Average key character time should be less or equal ${avgTimeByChar}ms`;
+        }
+        if (onError)
+            onError(stringWritingRef.current, errorMsg);
+        initScannerDetection();
+        return false;
+    }, [avgTimeByChar, emitScans, minLength, onError, onScanButtonLongPressed, scanButtonLongPressThreshold]);
+    const handleKey = useCallback((e) => {
+        const target = e.target;
+        if (target instanceof window.HTMLElement && isInput(target)) {
+            return;
+        }
+        // Prefer modern KeyboardEvent.key but keep compatibility with keyCode/which
+        const key = (e.key || "");
+        const code = typeof e.which !== "undefined" ? e.which : typeof e.keyCode !== "undefined" ? e.keyCode : undefined;
+        const isEnd = (code !== undefined && endChar.indexOf(code) !== -1) || key === "Enter" || key === "Tab";
+        // If it's just the button of the scanner, ignore it and wait for the real input
+        if (scanButtonKeyCode && code === scanButtonKeyCode) {
+            scanButtonCounterRef.current += 1;
+            if (preventDefault)
+                e.preventDefault();
+            if (stopPropagation)
+                e.stopImmediatePropagation?.();
+        }
+        // Fire keyDetect event in any case!
+        if (onKeyDetect)
+            onKeyDetect(e);
+        // For end characters, prevent default and stop propagation to avoid focus shifts
+        if (isEnd && firstCharTimeRef.current) {
+            e.preventDefault();
+            e.stopImmediatePropagation?.();
+        }
+        else {
+            // Only apply stopPropagation/preventDefault for non-end characters if configured
+            if (stopPropagation)
+                e.stopImmediatePropagation?.();
+            if (preventDefault)
+                e.preventDefault();
+        }
+        const isStart = code !== undefined && startChar.indexOf(code) !== -1;
+        if (firstCharTimeRef.current && isEnd) {
+            callIsScannerRef.current = true;
+        }
+        else if (!firstCharTimeRef.current && isStart) {
+            callIsScannerRef.current = false;
+        }
+        else {
+            // Append printable chars only
+            if (typeof code !== "undefined" && key.length === 1) {
+                stringWritingRef.current += key;
+            }
+            callIsScannerRef.current = false;
+        }
+        if (!firstCharTimeRef.current) {
+            firstCharTimeRef.current = Date.now();
+        }
+        lastCharTimeRef.current = Date.now();
+        if (testTimerRef.current)
+            clearTimeout(testTimerRef.current);
+        if (callIsScannerRef.current) {
+            scannerDetectionTest();
+            testTimerRef.current = false;
+        }
+        else {
+            testTimerRef.current = setTimeout(scannerDetectionTest, timeBeforeScanTest);
+        }
+        if (onReceive)
+            onReceive(e);
+    }, [
+        endChar,
+        onKeyDetect,
+        onReceive,
+        preventDefault,
+        scanButtonKeyCode,
+        scannerDetectionTest,
+        startChar,
+        stopPropagation,
+        timeBeforeScanTest,
+    ]);
+    // Register and clean up listeners
+    useEffect(() => {
+        const listener = handleKey;
+        // Use keydown (reliable for Enter/Tab)
+        if (inIframe())
+            window.parent.document.addEventListener("keydown", listener);
+        window.document.addEventListener("keydown", listener);
+        return () => {
+            if (inIframe())
+                window.parent.document.removeEventListener("keydown", listener);
+            window.document.removeEventListener("keydown", listener);
+            if (testTimerRef.current) {
+                clearTimeout(testTimerRef.current);
+            }
+        };
+    }, [handleKey]);
+    // Mimic the previous render side effect for testCode
+    useEffect(() => {
+        if (testCode)
+            scannerDetectionTest(testCode);
+    }, [testCode, scannerDetectionTest]);
+    return null;
+}
+export default BarcodeScanner;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@4efficiency/react-barcode-reader",
+  "version": "1.0.0",
+  "description": "A react component for reading barcodes and Qr codes from keybord input devices.",
+  "main": "dist/index.js",
+  "module":"dist/index.js",
+  "types":"dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=19.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://4ef.visualstudio.com/4EF%20Shared%20Libraries/_git/4ef-react-barcode-reader"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}