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

Comparing version 2.0.1 to 2.5.0

package.json

 {
   "name": "react-simple-qr-code-scanner",
-  "version": "2.0.1",
+  "version": "2.5.0",
   "description": "A super simple qr code scanner",
@@ -5,0 +5,0 @@ "exports": {

README.md

 # A simple qr-code scanner for react
 
-This is a simple qr-code scanner component for react
+This is a simple qr-code scanner component for react. Check out a simple demo [here](https://mitchellston.github.io/qr-code-scanner/)!
 
@@ -52,5 +52,35 @@ ## Installing
 
+### Custom styling
+
+The code snippet below demonstrates how to customize the styling of the QR code scanner component:
+
+```tsx
+import { QrCodeScanner } from "react-simple-qr-code-scanner";
+
+const App = () => (
+  <div style={{ width: "50vw" }}>
+    <QrCodeScanner
+      onResult={(result) => {
+        console.log(result);
+      }}
+    >
+      {(videoElement) => (
+        <div
+          style={{
+            borderColor: "rgb(147 197 253)",
+            borderWidth: "4px",
+            width: "100%",
+          }}
+        >
+          <video ref={videoElement} style={{ width: "100%", height: "100%" }} />
+        </div>
+      )}
+    </QrCodeScanner>
+  </div>
+);
+```
+
 ### Validating qr code data
 
-Currently, the component supports Zod as a validator for QR code data. See the example below:
+Currently, the component only supports Zod as a validator (or custom validators) for QR code data. See the example below:
 
@@ -84,2 +114,4 @@ ```tsx
 
+In this example, custom validation is performed on the QR code data:
+
 ```tsx
@@ -86,0 +118,0 @@ import { QrCodeScanner } from "react-simple-qr-code-scanner";

No alert changes

Improved metrics

Total package byte prevSize

10806

increased by7.74%

Number of lines in readme file

196

increased by19.51%

Worsened metrics

Lines of code

11

decreased by-86.08%

No dependency changes