react-qr-barcode-scanner 1.0.5 → 2.0.0

package/README.md

@@ -1,4 +1,4 @@
-# React Webcam Barcode Scanner
+# React QR Barcode Scanner
 
 This is a simple React component built in Typescript to provide a webcam-based barcode scanner using [react-webcam](https://github.com/mozmorris/react-webcam) and [@zxing/library](https://github.com/zxing-js/library). This component works on Computers and Mobile Devices (iOS 11 and above and Android Phones).
 
@@ -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/dist/BarcodeScannerComponent.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Result } from "@zxing/library";
-declare const BarcodeScannerComponent: ({ onUpdate, onError, width, height, facingMode, torch, delay, videoConstraints, stopStream, }: {
+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;

package/dist/BarcodeScannerComponent.js

@@ -1,17 +1,13 @@
-"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();
+import { jsx as _jsx } 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)
@@ -23,18 +19,14 @@ const BarcodeScannerComponent = ({ onUpdate, onError, width = "100%", height = "
             });
         }
     }, [onUpdate]);
-    react_1.default.useEffect(() => {
-        var _a, _b;
+    React.useEffect(() => {
         // 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 (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) {
@@ -46,10 +38,10 @@ const BarcodeScannerComponent = ({ onUpdate, onError, width = "100%", height = "
             }
         }
     }, [torch, onUpdate]);
-    react_1.default.useEffect(() => {
-        var _a;
+    React.useEffect(() => {
         if (stopStream) {
-            let stream = (_a = webcamRef === null || webcamRef === void 0 ? void 0 : webcamRef.current) === null || _a === void 0 ? void 0 : _a.video.srcObject;
+            // @ts-ignore
+            let stream = webcamRef?.current?.video.srcObject;
             if (stream) {
                 stream.getTracks().forEach((track) => {
                     stream.removeTrack(track);
@@ -59,14 +51,14 @@ const BarcodeScannerComponent = ({ onUpdate, onError, width = "100%", height = "
             }
         }
     }, [stopStream]);
-    react_1.default.useEffect(() => {
+    React.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 || {
+    return (_jsx(Webcam, { width: width, height: height, ref: webcamRef, screenshotFormat: "image/jpeg", videoConstraints: videoConstraints || {
             facingMode,
         }, audio: false, onUserMediaError: onError }));
 };
-exports.default = BarcodeScannerComponent;
+export default BarcodeScannerComponent;

package/dist/index.js

@@ -1,7 +1,2 @@
-"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;
+import BarcodeScannerComponent from './BarcodeScannerComponent';
+export default BarcodeScannerComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-qr-barcode-scanner",
-  "version": "1.0.5",
+  "version": "2.0.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",
@@ -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": "^18.2.0",
+    "@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.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
+    "eslint": "^9.12.0",
+    "eslint-plugin-react": "^7.33.2",
+    "typescript": "^5.2.2"
   }
 }