react-qr-barcode-scanner 1.0.6 → 2.0.1

package/README.md

@@ -10,6 +10,9 @@ Thanks to the initial repo: https://github.com/dashboardphilippines/react-webcam
 npm i react-qr-barcode-scanner
 ```
 
+## Demo
+Try a demo of the scanner [here](https://jamenamcinteer.github.io/react-qr-barcode-scanner/).
+
 ## Usage in React:
 
 ```jsx
@@ -43,7 +46,7 @@ export default App;
 
 Type: `function`, Required, Argument: `error`, `result`
 
-Function that returns the result for every captured frame. Text from barcode can be accessed from `result.text` if there is a result.
+Function that returns the result for every captured frame. Text from barcode can be accessed from `result.getText()` if there is a result.
 
 ### onError
 
@@ -126,3 +129,12 @@ These formats are supported by ZXing:
     <button onClick={dismissQrReader}>
   </Modal>
   ```
+
+## Contributing
+We welcome contributions to react-qr-barcode-scanner.
+
+If you have an idea for a new feature or have discovered a bug, please open an issue.
+
+Please `yarn build` in the root and `docs_src` directories before pushing changes.
+
+Don't forget to add a title and a description explaining the issue you're trying to solve and your proposed solution.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-qr-barcode-scanner",
-  "version": "1.0.6",
+  "version": "2.0.1",
   "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",
@@ -10,7 +10,7 @@
   ],
   "scripts": {
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",
-    "build": "rm -rf dist && tsc --build tsconfig.json",
+    "build": "rm -rf dist && tsc --build tsconfig.json --declaration",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -32,19 +32,19 @@
   },
   "homepage": "https://github.com/jamenamcinteer/react-qr-barcode-scanner#readme",
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@types/react": "^16.9.35",
-    "@zxing/library": "^0.17.0",
-    "react-webcam": "^5.0.1"
+    "@types/react": "^19.0.2",
+    "@zxing/library": "^0.21.3",
+    "react-webcam": "^7.1.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "eslint": "^7.0.0",
-    "eslint-plugin-react": "^7.20.0",
-    "typescript": "^3.9.2"
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "eslint": "^9.20.1",
+    "eslint-plugin-react": "^7.37.3",
+    "typescript": "^5.7.2"
   }
-}
+}

package/dist/BarcodeScannerComponent.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import { Result } from "@zxing/library";
-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,72 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const library_1 = require("@zxing/library");
-const react_webcam_1 = __importDefault(require("react-webcam"));
-const BarcodeScannerComponent = ({ onUpdate, onError, width = "100%", height = "100%", facingMode = "environment", torch, delay = 500, videoConstraints, stopStream, }) => {
-    const webcamRef = react_1.default.useRef(null);
-    const capture = react_1.default.useCallback(() => {
-        var _a;
-        const codeReader = new library_1.BrowserMultiFormatReader();
-        const imageSrc = (_a = webcamRef === null || webcamRef === void 0 ? void 0 : webcamRef.current) === null || _a === void 0 ? void 0 : _a.getScreenshot();
-        if (imageSrc) {
-            codeReader
-                .decodeFromImage(undefined, imageSrc)
-                .then((result) => {
-                onUpdate(null, result);
-            })
-                .catch((err) => {
-                onUpdate(err);
-            });
-        }
-    }, [onUpdate]);
-    react_1.default.useEffect(() => {
-        var _a, _b;
-        // Turn on the flashlight if prop is defined and device has the capability
-        if (typeof torch === "boolean" && ((_a = 
-        // @ts-ignore
-        navigator === null || 
-        // @ts-ignore
-        navigator === void 0 ? void 0 : 
-        // @ts-ignore
-        navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getSupportedConstraints().torch)) {
-            const stream = (_b = webcamRef === null || webcamRef === void 0 ? void 0 : webcamRef.current) === null || _b === void 0 ? void 0 : _b.video.srcObject;
-            const track = stream === null || stream === void 0 ? void 0 : 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_1.default.useEffect(() => {
-        var _a;
-        if (stopStream) {
-            let stream = (_a = webcamRef === null || webcamRef === void 0 ? void 0 : webcamRef.current) === null || _a === void 0 ? void 0 : _a.video.srcObject;
-            if (stream) {
-                stream.getTracks().forEach((track) => {
-                    stream.removeTrack(track);
-                    track.stop();
-                });
-                stream = null;
-            }
-        }
-    }, [stopStream]);
-    react_1.default.useEffect(() => {
-        const interval = setInterval(capture, delay);
-        return () => {
-            clearInterval(interval);
-        };
-    }, []);
-    return (react_1.default.createElement(react_webcam_1.default, { width: width, height: height, ref: webcamRef, screenshotFormat: "image/jpeg", videoConstraints: videoConstraints || {
-            facingMode,
-        }, audio: false, onUserMediaError: onError }));
-};
-exports.default = BarcodeScannerComponent;

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-import BarcodeScannerComponent from './BarcodeScannerComponent';
-export default BarcodeScannerComponent;

package/dist/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const BarcodeScannerComponent_1 = __importDefault(require("./BarcodeScannerComponent"));
-exports.default = BarcodeScannerComponent_1.default;