@blackbox-vision/react-qr-reader - npm Package Compare versions

Comparing version 4.0.0-2 to 4.0.0

dist-node/index.js

@@ -28,4 +28,4 @@ 'use strict';
 const useQrReader = ({
+  scanDelay: delayBetweenScanAttempts,
   constraints: video,
-  scanDelay,
   onResult,
@@ -37,3 +37,3 @@ videoId
     const codeReader = new browser.BrowserQRCodeReader(null, {
-      delayBetweenScanAttempts: scanDelay
+      delayBetweenScanAttempts
     });
@@ -117,21 +117,17 @@
 
-var styles = {
+const styles = {
   container: {
+    width: '100%',
+    paddingTop: '100%',
     overflow: 'hidden',
-    position: 'relative',
-    width: '100%',
-    paddingTop: '100%'
+    position: 'relative'
   },
-  hidden: {
-    display: 'none'
-  },
-  videoPreview: {
+  video: {
     top: 0,
     left: 0,
+    width: '100%',
+    height: '100%',
     display: 'block',
+    overflow: 'hidden',
     position: 'absolute',
-    overflow: 'hidden',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
     transform: undefined
@@ -144,12 +140,6 @@ }
   ViewFinder,
-  className,
   scanDelay,
   onResult,
-  videoId,
-  style
+  videoId
 }) => {
-  const videoStyle = _objectSpread2(_objectSpread2({}, styles.videoPreview), {}, {
-    transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
-  });
-
   useQrReader({
@@ -162,11 +152,10 @@ constraints,
   return /*#__PURE__*/React.createElement("section", {
-    className: className,
-    style: style
-  }, /*#__PURE__*/React.createElement("section", {
     style: styles.container
   }, !!ViewFinder && /*#__PURE__*/React.createElement(ViewFinder, null), /*#__PURE__*/React.createElement("video", {
+    muted: true,
     id: videoId,
-    muted: true,
-    style: videoStyle
-  })));
+    style: _objectSpread2(_objectSpread2({}, styles.video), {}, {
+      transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
+    })
+  }));
 };
@@ -173,0 +162,0 @@ QrReader.displayName = 'QrReader';

dist-src/QrReader/hooks.js

@@ -6,4 +6,4 @@ import { useEffect, useRef } from 'react';
 export const useQrReader = ({
+  scanDelay: delayBetweenScanAttempts,
   constraints: video,
-  scanDelay,
   onResult,
@@ -15,3 +15,3 @@ videoId
     const codeReader = new BrowserQRCodeReader(null, {
-      delayBetweenScanAttempts: scanDelay
+      delayBetweenScanAttempts
     });
@@ -18,0 +18,0 @@

dist-src/QrReader/index.js

 import * as React from 'react';
-import styles from "./styles.js";
+import { styles } from "./styles.js";
 import { useQrReader } from "./hooks.js";
@@ -7,11 +7,6 @@ export const QrReader = ({
   ViewFinder,
-  className,
   scanDelay,
   onResult,
-  videoId,
-  style
+  videoId
 }) => {
-  const videoStyle = { ...styles.videoPreview,
-    transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
-  };
   useQrReader({
@@ -24,11 +19,10 @@ constraints,
   return /*#__PURE__*/React.createElement("section", {
-    className: className,
-    style: style
-  }, /*#__PURE__*/React.createElement("section", {
     style: styles.container
   }, !!ViewFinder && /*#__PURE__*/React.createElement(ViewFinder, null), /*#__PURE__*/React.createElement("video", {
+    muted: true,
     id: videoId,
-    muted: true,
-    style: videoStyle
-  })));
+    style: { ...styles.video,
+      transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
+    }
+  }));
 };
@@ -35,0 +29,0 @@ QrReader.displayName = 'QrReader';

dist-src/QrReader/styles.js

@@ -1,22 +0,18 @@
-export default {
+export const styles = {
   container: {
+    width: '100%',
+    paddingTop: '100%',
     overflow: 'hidden',
-    position: 'relative',
-    width: '100%',
-    paddingTop: '100%'
+    position: 'relative'
   },
-  hidden: {
-    display: 'none'
-  },
-  videoPreview: {
+  video: {
     top: 0,
     left: 0,
+    width: '100%',
+    height: '100%',
     display: 'block',
+    overflow: 'hidden',
     position: 'absolute',
-    overflow: 'hidden',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
     transform: undefined
   }
 };

dist-types/QrReader/styles.d.ts

@@ -1,23 +0,1 @@
-declare const _default: {
-    container: {
-        overflow: string;
-        position: string;
-        width: string;
-        paddingTop: string;
-    };
-    hidden: {
-        display: string;
-    };
-    videoPreview: {
-        top: number;
-        left: number;
-        display: string;
-        position: string;
-        overflow: string;
-        width: string;
-        height: string;
-        objectFit: string;
-        transform: any;
-    };
-};
-export default _default;
+export declare const styles: any;

dist-types/types/index.d.ts

@@ -10,6 +10,2 @@ /// <reference types="react" />
     /**
-     * ClassName for the container element.
-     */
-    className?: string;
-    /**
      * Called when an error occurs.
@@ -19,6 +15,2 @@ */
     /**
-     * Styling for the container element. Warning The preview will always keep its 1:1 aspect ratio.
-     */
-    style?: any;
-    /**
      * Property that represents the view finder component
@@ -25,0 +17,0 @@ */

dist-web/index.js

@@ -24,4 +24,4 @@ import { useRef, useEffect, createElement } from 'react';
 const useQrReader = ({
+  scanDelay: delayBetweenScanAttempts,
   constraints: video,
-  scanDelay,
   onResult,
@@ -33,3 +33,3 @@ videoId
     const codeReader = new BrowserQRCodeReader(null, {
-      delayBetweenScanAttempts: scanDelay
+      delayBetweenScanAttempts
     });
@@ -64,21 +64,17 @@
 
-var styles = {
+const styles = {
   container: {
+    width: '100%',
+    paddingTop: '100%',
     overflow: 'hidden',
-    position: 'relative',
-    width: '100%',
-    paddingTop: '100%'
+    position: 'relative'
   },
-  hidden: {
-    display: 'none'
-  },
-  videoPreview: {
+  video: {
     top: 0,
     left: 0,
+    width: '100%',
+    height: '100%',
     display: 'block',
+    overflow: 'hidden',
     position: 'absolute',
-    overflow: 'hidden',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
     transform: undefined
@@ -91,11 +87,6 @@ }
   ViewFinder,
-  className,
   scanDelay,
   onResult,
-  videoId,
-  style
+  videoId
 }) => {
-  const videoStyle = { ...styles.videoPreview,
-    transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
-  };
   useQrReader({
@@ -108,11 +99,10 @@ constraints,
   return /*#__PURE__*/createElement("section", {
-    className: className,
-    style: style
-  }, /*#__PURE__*/createElement("section", {
     style: styles.container
   }, !!ViewFinder && /*#__PURE__*/createElement(ViewFinder, null), /*#__PURE__*/createElement("video", {
+    muted: true,
     id: videoId,
-    muted: true,
-    style: videoStyle
-  })));
+    style: { ...styles.video,
+      transform: (constraints === null || constraints === void 0 ? void 0 : constraints.facingMode) === 'user' && 'scaleX(-1)'
+    }
+  }));
 };
@@ -119,0 +109,0 @@ QrReader.displayName = 'QrReader';

package.json

 {
   "name": "@blackbox-vision/react-qr-reader",
   "description": "A React Component for reading QR codes from the webcam",
-  "version": "4.0.0-2",
+  "version": "4.0.0",
   "license": "MIT",
@@ -28,6 +28,6 @@ "files": [
   "peerDependencies": {
-    "react": "~16",
-    "react-dom": "~16",
     "@zxing/browser": "0.0.7",
-    "@zxing/library": "^0.18.3"
+    "@zxing/library": "^0.18.3",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   },
@@ -48,5 +48,5 @@ "devDependencies": {
     "@pika/plugin-standard-pkg": "^0.9.2",
-    "@storybook/addon-essentials": "^6.1.17",
-    "@storybook/react": "^6.1.17",
-    "@storybook/storybook-deployer": "^2.8.6",
+    "@storybook/addon-essentials": "^6.1.21",
+    "@storybook/react": "^6.1.21",
+    "@storybook/storybook-deployer": "^2.8.7",
     "@types/react": "^16.9.49",
@@ -53,0 +53,0 @@ "@typescript-eslint/eslint-plugin": "^4.1.0",

README.md

@@ -53,4 +53,2 @@ <p align="center">
 
-// TODO: add info about polyfilling UserMedia API
-
 ## Example Usage
@@ -91,11 +89,11 @@
 
-| Properties  | Types                 | Default Value            | Description                                                                                       |
-| ----------- | --------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- |
-| constraints | MediaTrackConstraints | `{ facingMode: 'user' }` | Specify which camera should be used (if available).                                               |
-| onResult    | `function`            | none                     | Scan event handler                                                                                |
-| videoId     | `string`              | `video`                  | The ID for the video element                                                                      |
-| scanDelay   | `number`              | `500`                    | The scan period for the QR hook                                                                   |
-| ViewFinder  | component             | none                     | ViewFinder component to rendering over the video element                                          |
-| style       | a valid React style   | none                     | Styling for the container element. **Warning** The preview will always keep its 1:1 aspect ratio. |
-| className   | string                | none                     | ClassName for the container element.                                                              |
+| Properties  | Types                                                                                           | Default Value            | Description                                                                                       |
+| ----------- | ----------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- |
+| constraints | [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) | `{ facingMode: 'user' }` | Specify which camera should be used (if available).                                               |
+| onResult    | `function`                                                                                      | none                     | Scan event handler                                                                                |
+| videoId     | `string`                                                                                        | `video`                  | The ID for the video element                                                                      |
+| scanDelay   | `number`                                                                                        | `500`                    | The scan period for the QR hook                                                                   |
+| ViewFinder  | component                                                                                       | none                     | ViewFinder component to rendering over the video element                                          |
+| style       | a valid React style                                                                             | none                     | Styling for the container element. **Warning** The preview will always keep its 1:1 aspect ratio. |
+| className   | string                                                                                          | none                     | ClassName for the container element.                                                              |
 
@@ -102,0 +100,0 @@ ## Browser Support

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

35092

decreased by-4.24%

Lines of code

413

decreased by-12.68%

Number of lines in readme file

113

decreased by-1.74%

No dependency changes