react-simple-qr-code-scanner - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.1

package.json

 {
   "name": "react-simple-qr-code-scanner",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.1",
   "description": "A super simple qr code scanner",
@@ -9,2 +9,10 @@ "exports": {
       "types": "./dist/index.d.ts"
+    },
+    "./validators": {
+      "import": "./dist/src/validator/index.mjs",
+      "types": "./dist/src/validator/index.d.ts"
+    },
+    "./validators/*": {
+      "import": "./dist/src/validator/*.mjs",
+      "types": "./dist/src/validator/*.d.ts"
     }
@@ -47,3 +55,4 @@ },
     "tsup": "^7.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "zod": "^3.21.4"
   },
@@ -50,0 +59,0 @@ "peerDependencies": {

README.md

@@ -11,3 +11,3 @@ # A simple qr-code scanner for react
 
-- Vite js:
+- For Vite react JavaScript starter template, run the following command:
 
@@ -18,3 +18,3 @@ ```
 
-- Vite ts:
+- For Vite react TypeScript starter template, use the command:
 
@@ -31,4 +31,8 @@ ```
 
-## Basic demo
+## Demos
 
+### Basic
+
+The code snippet below demonstrates the basic usage of the QR code scanner component:
+
 ```tsx
@@ -45,3 +49,3 @@ import { QrCodeScanner } from "react-simple-qr-code-scanner";
       }},
-      facingMode={"environment"} //or user
+      facingMode={"environment"} // Or "user"
     />
@@ -52,7 +56,35 @@ );
 
-### Validating qr code result
+### Validating qr code data
 
+Currently, the component supports Zod as a validator for QR code data. See the example below:
+
 ```tsx
-import { useState } from "react";
-import { Exception, QrCodeScanner } from "react-simple-qr-code-scanner";
+import { QrCodeScanner } from "react-simple-qr-code-scanner";
+import { ZodQrCodeDataValidator } from "react-simple-qr-code-scanner/validators";
+import { z } from "zod";
+const QrCodeData = z.object({
+  foo: z.string(),
+  bar: z.number().min(500, "bar must be greater than 500"),
+});
+function App() {
+  return (
+    <>
+      <QrCodeScanner
+        validate={(data) => ZodQrCodeDataValidator(data, QrCodeData)}
+        onResult={(result) => {
+          console.log(result); // Result will be of the type {foo: string; bar: number;}
+        }}
+        onError={(error) => {
+          console.log(error); // Displays an error message if 'bar' is less than 500
+        }}
+      />
+    </>
+  );
+}
+```
+
+### Validating qr code data with custom validation
+
+```tsx
+import { QrCodeScanner } from "react-simple-qr-code-scanner";
 type QrCodeData = {
@@ -86,6 +118,6 @@ foo: string;
         onResult={(result) => {
-          console.log(result); // result will be of type IQrCodeData here (since the validation checks for this)
+          console.log(result); // Result will be of type QrCodeData due to the validation defined in the 'validate' property
         }}
         onError={(errorScan) => {
-          console.log(errorScan.message); // Get the error messages or any other error message
+          console.log(errorScan.message); // Log the validation error messages
         }}
@@ -98,6 +130,41 @@ />
 
+## Updating to version 2.0.0 (or higher)
+
+Starting from version 2.0.0, the onResult function now takes two parameters. The rawResult parameter represents the original result.
+
+### Examples
+
+Before 2.0.0:
+
+```tsx
+import { QrCodeScanner } from "react-simple-qr-code-scanner";
+function App() {
+  return (
+    <QrCodeScanner
+      onResult={(result) => {
+        console.log(result.getText());
+      }}
+    />
+  );
+}
+```
+
+Since Version 2.0.0:
+
+```tsx
+import { QrCodeScanner } from "react-simple-qr-code-scanner";
+function App() {
+  return (
+    <QrCodeScanner
+      onResult={(result, raw) => {
+        console.log(result); // Returns the text, parsing and validating it if necessary.
+        console.log(raw.getText()); //
+      }}
+    />
+  );
+}
+```
+
 ## License
 
-This project is licensed under the [MIT](LICENSE)
-License - see the [LICENSE](LICENSE) file for
-details
+This project is licensed under the [MIT License](LICENSE) License. See the [LICENSE](LICENSE) file for more details.

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

Total package byte prevSize

10030

increased by42.8%

Number of package files

10

increased by100%

Lines of code

79

increased by49.06%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

164

increased by69.07%

Worsened metrics

Dev dependency count

6

increased by20%

No dependency changes