react-qr-barcode-scanner - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

dist/BarcodeScannerComponent.d.ts

 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;
@@ -5,0 +5,0 @@ onError?: (arg0: string | DOMException) => void;

dist/BarcodeScannerComponent.js

@@ -1,15 +0,11 @@
-"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) {
@@ -26,14 +22,10 @@ codeReader
     }, [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 &&
@@ -50,6 +42,6 @@ track.getCapabilities().torch &&
     }, [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) {
@@ -64,3 +56,3 @@ stream.getTracks().forEach((track) => {
     }, [stopStream]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         const interval = setInterval(capture, delay);
@@ -71,6 +63,6 @@ return () => {
     }, []);
-    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;

dist/index.js

@@ -1,7 +0,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.json

 {
   "name": "react-qr-barcode-scanner",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "A simple React Component using the client's webcam to read barcodes and QR codes.",
@@ -13,3 +13,3 @@ "main": "dist/index.js",
     "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"
@@ -36,17 +36,17 @@ },
   "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"
   }
 }

README.md

@@ -13,2 +13,5 @@ # React QR Barcode Scanner
 
+## Demo
+Try a demo of the scanner [here](https://jamenamcinteer.github.io/react-qr-barcode-scanner/).
+
 ## Usage in React:
@@ -47,3 +50,3 @@
 
-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.
 
@@ -131,1 +134,10 @@ ### onError
   ```
+
+## 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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

140

increased by8.53%

Worsened metrics

Total package byte prevSize

9598

decreased by-5.42%

Lines of code

82

decreased by-13.68%

Dependency changes

• + Added@types/react@18.3.17(transitive)

• + Added@zxing/library@0.21.3(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-webcam@7.2.0(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@types/react@16.14.62(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removed@zxing/library@0.17.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-webcam@5.2.4(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updated@types/react@^18.2.0

• Updated@zxing/library@^0.21.3

• Updatedreact-webcam@^7.1.1