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

Comparing version 1.0.1 to 1.0.2

.eslintrc.js

@@ -0,0 +0,0 @@ /* eslint-disable */

package.json

 {
   "name": "react-qr-barcode-scanner",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple React Component using the client's webcam to read barcodes and QR codes.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # React Webcam Barcode Scanner
 
-This is a simple barebones 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).
+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).
 
+Thanks to the initial repo: https://github.com/dashboardphilippines/react-webcam-barcode-scanner
+
 ## Installation
 
 ```
-npm i react-webcam-barcode-scanner
+npm i react-qr-barcode-scanner
 ```
@@ -13,12 +15,9 @@
 
-A demo of this can be found at: [https://barcode.phdash.com](https://barcode.phdash.com).
-
 ```jsx
-import React from 'react';
+import React from "react";
 import BarcodeScannerComponent from "react-webcam-barcode-scanner";
 
 function App() {
+  const [data, setData] = React.useState("Not Found");
 
-  const [ data, setData ] = React.useState('Not Found');
-
   return (
@@ -30,4 +29,4 @@ <>
         onUpdate={(err, result) => {
-          if (result) setData(result.text)
-          else setData('Not Found')
+          if (result) setData(result.text);
+          else setData("Not Found");
         }}
@@ -37,3 +36,3 @@ />
     </>
-  )
+  );
 }
@@ -43,1 +42,44 @@
 ```
+
+## Props
+
+### onUpdate
+
+Type: `function`, Required, Argument: `error`, `result`
+
+### width
+
+Type: `number` or `string`, Optional, Default: `100%`
+
+### height
+
+Type: `number` or `string`, Optional, Default: `100%`
+
+### facingMode
+
+Type: `environment` or `user`, Optional, Default: `environment`
+
+### delay
+
+Type: `number`, Optional, Default: `500`
+
+### videoConstraints
+
+Type: `MediaTrackConstraints`, Optional
+
+## Supported Barcode Formats
+
+These formats are supported by ZXing:
+
+| 1D product | 1D industrial | 2D          |
+| ---------- | ------------- | ----------- |
+| UPC-A      | Code 39       | QR Code     |
+| UPC-E      | Code 128      | Data Matrix |
+| EAN-8      | ITF           | Aztec       |
+| EAN-13     | RSS-14        | PDF 417     |
+
+## Known Issues
+
+- The camera can only be accessed over https or localhost
+- Browser compatibility is limited by react-webcam's usage of the Stream API: https://caniuse.com/stream
+- On iOS-Devices with iOS < 14.3 camera access works only in native Safari and not in other Browsers (Chrome,...) or Apps that use an UIWebView or WKWebView. iOS 14.3 (released in december 2020) now supports WebRTC in 3rd party browsers as well.

No alert changes

Improved metrics

Total package byte prevSize

4705

increased by28.13%

Number of lines in readme file

82

increased by105%

No dependency changes