react-qr-barcode-scanner 2.0.4 → 2.1.0

package/README.md

@@ -18,15 +18,15 @@ Try a demo of the scanner [here](https://jamenamcinteer.github.io/react-qr-barco
 ## Usage in React:
 
 ```jsx
-import React from "react";
-import BarcodeScannerComponent from "react-qr-barcode-scanner";
+import { useState } from "react";
+import BarcodeScanner from "react-qr-barcode-scanner";
 
 function App() {
-  const [data, setData] = React.useState("Not Found");
+  const [data, setData] = useState("Not Found");
 
   return (
     <>
-      <BarcodeScannerComponent
+      <BarcodeScanner
         width={500}
         height={500}
         onUpdate={(err, result) => {
@@ -98,6 +98,12 @@ Type: `boolean`, Optional
 
 This prop is a workaround for a bug where the browser freezes if the webcam component is unmounted or removed. See known issues for more about this issue.
 
+### formats
+
+Type: `BarcodeFormat[] | BarcodeStringFormat[]`, Optional
+
+Array of barcode formats to decode. If not provided, all formats will be used. A smaller list may improve the speed of the scan.
+
 ## Supported Barcode Formats
 
 These formats are supported by ZXing:

package/dist/BarcodeScanner.d.ts

@@ -0,0 +1,68 @@
+import { BarcodeFormat, Result } from "@zxing/library";
+import { BarcodeStringFormat } from "./BarcodeStringFormat";
+declare global {
+    interface MediaTrackCapabilities {
+        torch?: boolean;
+    }
+}
+export declare const BarcodeScanner: ({ onUpdate, onError, width, height, facingMode, torch, delay, videoConstraints, stopStream, formats, }: {
+    /**
+     * Function that returns the result for every captured frame. Text from barcode can be accessed from result.getText() if there is a result.
+     * @param arg0 Error message or null
+     * @param arg1 result of the scan
+     * @returns
+     */
+    onUpdate: (arg0: unknown, arg1?: Result) => void;
+    /**
+     * If passed to the component, this function is called when there is an error with the camera (rather than with with reading the QR code, which would be passed to onUpdate). An example would be an error thrown when the user does not allow the required camera permission.
+     * @param arg0 Error message or DOMException
+     * @returns
+     */
+    onError?: (arg0: string | DOMException) => void;
+    /**
+     * The width of the video element. Default is "100%".
+     * Can be a number (in pixels) or a string (e.g. "100%").
+     * If a number is provided, it will be converted to a string with "px" appended.
+     * If a string is provided, it will be used as-is.
+     * @example
+     * width={500} // 500px
+     * width="100%" // 100% of the parent element
+     */
+    width?: number | string;
+    /**
+     * The height of the video element. Default is "100%".
+     * Can be a number (in pixels) or a string (e.g. "100%").
+     * If a number is provided, it will be converted to a string with "px" appended.
+     * If a string is provided, it will be used as-is.
+     * @example
+     * height={500} // 500px
+     * height="100%" // 100% of the parent element
+     */
+    height?: number | string;
+    /**
+     * The facing mode of the camera. Default is "environment".
+     * Can be "user" for front camera or "environment" for back camera.
+     */
+    facingMode?: "environment" | "user";
+    /**
+     * Whether to turn on the flashlight. Default is false.
+     */
+    torch?: boolean;
+    /**
+     * Delay between scans in milliseconds. Default is 500ms.
+     */
+    delay?: number;
+    /**
+     * Video constraints to pass to the webcam. If not provided, the default constraints will be used.
+     */
+    videoConstraints?: MediaTrackConstraints;
+    stopStream?: boolean;
+    /**
+     * Array of barcode formats to decode. If not provided, all formats will be used. A smaller list may improve the speed of the scan.
+     *
+     * @example
+     * formats={["QR_CODE", "DATA_MATRIX"]}
+     */
+    formats?: BarcodeFormat[] | BarcodeStringFormat[];
+}) => React.ReactElement;
+export default BarcodeScanner;

package/dist/BarcodeScanner.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { BarcodeFormat, BrowserMultiFormatReader, DecodeHintType, } from "@zxing/library";
+import Webcam from "react-webcam";
+export const BarcodeScanner = ({ onUpdate, onError, width = "100%", height = "100%", facingMode = "environment", torch, delay = 500, videoConstraints, stopStream, formats, }) => {
+    const webcamRef = useRef(null);
+    const capture = useCallback(() => {
+        const codeReader = new BrowserMultiFormatReader(new Map([
+            [
+                DecodeHintType.POSSIBLE_FORMATS,
+                formats?.map((f) => (typeof f === "string" ? BarcodeFormat[f] : f)),
+            ],
+        ]));
+        const imageSrc = webcamRef?.current?.getScreenshot();
+        if (imageSrc) {
+            codeReader
+                .decodeFromImage(undefined, imageSrc)
+                .then((result) => {
+                onUpdate(null, result);
+            })
+                .catch((err) => {
+                onUpdate(err);
+            });
+        }
+    }, [onUpdate, formats]);
+    useEffect(() => {
+        // Turn on the flashlight if prop is defined and device has the capability
+        if (typeof torch === "boolean" &&
+            (navigator?.mediaDevices?.getSupportedConstraints()).torch) {
+            const stream = webcamRef?.current?.video?.srcObject;
+            const track = stream?.getVideoTracks()[0]; // get the active track of the stream
+            if (track && track.getCapabilities().torch) {
+                track
+                    .applyConstraints({
+                    advanced: [{ torch }],
+                })
+                    .catch((err) => onUpdate(err));
+            }
+        }
+    }, [torch, onUpdate]);
+    useEffect(() => {
+        if (stopStream) {
+            let stream = webcamRef?.current?.video?.srcObject;
+            if (stream) {
+                stream.getTracks().forEach((track) => {
+                    stream?.removeTrack(track);
+                    track.stop();
+                });
+                stream = null;
+            }
+        }
+    }, [stopStream]);
+    useEffect(() => {
+        const interval = setInterval(capture, delay);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [capture, delay]);
+    return (_jsx(Webcam, { width: width, height: height, ref: webcamRef, screenshotFormat: "image/jpeg", videoConstraints: videoConstraints || {
+            facingMode,
+        }, audio: false, onUserMediaError: onError }));
+};
+export default BarcodeScanner;

package/dist/BarcodeStringFormat.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Enumerates barcode formats known to this package as strings. These need to be the same as BarcodeFormat from "@zing/library".
+ */
+export declare enum BarcodeStringFormat {
+    /** Aztec 2D barcode format. */
+    AZTEC = "AZTEC",
+    /** CODABAR 1D format. */
+    CODABAR = "CODABAR",
+    /** Code 39 1D format. */
+    CODE_39 = "CODE_39",
+    /** Code 93 1D format. */
+    CODE_93 = "CODE_93",
+    /** Code 128 1D format. */
+    CODE_128 = "CODE_128",
+    /** Data Matrix 2D barcode format. */
+    DATA_MATRIX = "DATA_MATRIX",
+    /** EAN-8 1D format. */
+    EAN_8 = "EAN_8",
+    /** EAN-13 1D format. */
+    EAN_13 = "EAN_13",
+    /** ITF (Interleaved Two of Five) 1D format. */
+    ITF = "ITF",
+    /** MaxiCode 2D barcode format. */
+    MAXICODE = "MAXICODE",
+    /** PDF417 format. */
+    PDF_417 = "PDF_417",
+    /** QR Code 2D barcode format. */
+    QR_CODE = "QR_CODE",
+    /** RSS 14 */
+    RSS_14 = "RSS_14",
+    /** RSS EXPANDED */
+    RSS_EXPANDED = "RSS_EXPANDED",
+    /** UPC-A 1D format. */
+    UPC_A = "UPC_A",
+    /** UPC-E 1D format. */
+    UPC_E = "UPC_E",
+    /** UPC/EAN extension format. Not a stand-alone format. */
+    UPC_EAN_EXTENSION = "UPC_EAN_EXTENSION"
+}
+export default BarcodeStringFormat;

package/dist/BarcodeStringFormat.js

@@ -0,0 +1,41 @@
+/**
+ * Enumerates barcode formats known to this package as strings. These need to be the same as BarcodeFormat from "@zing/library".
+ */
+export var BarcodeStringFormat;
+(function (BarcodeStringFormat) {
+    /** Aztec 2D barcode format. */
+    BarcodeStringFormat["AZTEC"] = "AZTEC";
+    /** CODABAR 1D format. */
+    BarcodeStringFormat["CODABAR"] = "CODABAR";
+    /** Code 39 1D format. */
+    BarcodeStringFormat["CODE_39"] = "CODE_39";
+    /** Code 93 1D format. */
+    BarcodeStringFormat["CODE_93"] = "CODE_93";
+    /** Code 128 1D format. */
+    BarcodeStringFormat["CODE_128"] = "CODE_128";
+    /** Data Matrix 2D barcode format. */
+    BarcodeStringFormat["DATA_MATRIX"] = "DATA_MATRIX";
+    /** EAN-8 1D format. */
+    BarcodeStringFormat["EAN_8"] = "EAN_8";
+    /** EAN-13 1D format. */
+    BarcodeStringFormat["EAN_13"] = "EAN_13";
+    /** ITF (Interleaved Two of Five) 1D format. */
+    BarcodeStringFormat["ITF"] = "ITF";
+    /** MaxiCode 2D barcode format. */
+    BarcodeStringFormat["MAXICODE"] = "MAXICODE";
+    /** PDF417 format. */
+    BarcodeStringFormat["PDF_417"] = "PDF_417";
+    /** QR Code 2D barcode format. */
+    BarcodeStringFormat["QR_CODE"] = "QR_CODE";
+    /** RSS 14 */
+    BarcodeStringFormat["RSS_14"] = "RSS_14";
+    /** RSS EXPANDED */
+    BarcodeStringFormat["RSS_EXPANDED"] = "RSS_EXPANDED";
+    /** UPC-A 1D format. */
+    BarcodeStringFormat["UPC_A"] = "UPC_A";
+    /** UPC-E 1D format. */
+    BarcodeStringFormat["UPC_E"] = "UPC_E";
+    /** UPC/EAN extension format. Not a stand-alone format. */
+    BarcodeStringFormat["UPC_EAN_EXTENSION"] = "UPC_EAN_EXTENSION";
+})(BarcodeStringFormat || (BarcodeStringFormat = {}));
+export default BarcodeStringFormat;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-import BarcodeScannerComponent from './BarcodeScannerComponent';
-export default BarcodeScannerComponent;
+import BarcodeScanner from "./BarcodeScanner";
+export { default as BarcodeStringFormat } from "./BarcodeStringFormat";
+export { BarcodeFormat } from "@zxing/library";
+export default BarcodeScanner;

package/dist/index.js

@@ -1,2 +1,4 @@
-import BarcodeScannerComponent from './BarcodeScannerComponent';
-export default BarcodeScannerComponent;
+import BarcodeScanner from "./BarcodeScanner";
+export { default as BarcodeStringFormat } from "./BarcodeStringFormat";
+export { BarcodeFormat } from "@zxing/library";
+export default BarcodeScanner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-qr-barcode-scanner",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "A simple React Component using the client's webcam to read barcodes and QR codes.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/BarcodeScannerComponent.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import { Result } from "@zxing/library";
-export declare const BarcodeScannerComponent: ({ onUpdate, onError, width, height, facingMode, torch, delay, videoConstraints, stopStream, }: {
-    onUpdate: (arg0: unknown, arg1?: Result) => void;
-    onError?: (arg0: string | DOMException) => void;
-    width?: number | string;
-    height?: number | string;
-    facingMode?: "environment" | "user";
-    torch?: boolean;
-    delay?: number;
-    videoConstraints?: MediaTrackConstraints;
-    stopStream?: boolean;
-}) => React.ReactElement;
-export default BarcodeScannerComponent;

package/dist/BarcodeScannerComponent.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import { BrowserMultiFormatReader } from "@zxing/library";
-import Webcam from "react-webcam";
-export const BarcodeScannerComponent = ({ onUpdate, onError, width = "100%", height = "100%", facingMode = "environment", torch, delay = 500, videoConstraints, stopStream, }) => {
-    const webcamRef = React.useRef(null);
-    const capture = React.useCallback(() => {
-        const codeReader = new BrowserMultiFormatReader();
-        // @ts-ignore
-        const imageSrc = webcamRef?.current?.getScreenshot();
-        if (imageSrc) {
-            codeReader
-                .decodeFromImage(undefined, imageSrc)
-                .then((result) => {
-                onUpdate(null, result);
-            })
-                .catch((err) => {
-                onUpdate(err);
-            });
-        }
-    }, [onUpdate]);
-    React.useEffect(() => {
-        // Turn on the flashlight if prop is defined and device has the capability
-        if (typeof torch === "boolean" &&
-            // @ts-ignore
-            navigator?.mediaDevices?.getSupportedConstraints().torch) {
-            // @ts-ignore
-            const stream = webcamRef?.current?.video.srcObject;
-            const track = stream?.getVideoTracks()[0]; // get the active track of the stream
-            if (track &&
-                track.getCapabilities().torch &&
-                !track.getConstraints().torch) {
-                track
-                    .applyConstraints({
-                    advanced: [{ torch }],
-                })
-                    .catch((err) => onUpdate(err));
-            }
-        }
-    }, [torch, onUpdate]);
-    React.useEffect(() => {
-        if (stopStream) {
-            // @ts-ignore
-            let stream = webcamRef?.current?.video.srcObject;
-            if (stream) {
-                stream.getTracks().forEach((track) => {
-                    stream.removeTrack(track);
-                    track.stop();
-                });
-                stream = null;
-            }
-        }
-    }, [stopStream]);
-    React.useEffect(() => {
-        const interval = setInterval(capture, delay);
-        return () => {
-            clearInterval(interval);
-        };
-    }, []);
-    return (_jsx(_Fragment, { children: _jsx(Webcam, { width: width, height: height, ref: webcamRef, screenshotFormat: "image/jpeg", videoConstraints: videoConstraints || {
-                facingMode,
-            }, audio: false, onUserMediaError: onError }) }));
-};
-export default BarcodeScannerComponent;