@uziee/document-scanner 1.1.7 → 1.1.8

package/README.md

@@ -20,7 +20,16 @@ npm install @uziee/document-scanner
 
 ## 📖 Usage
 
-Import the `DocumentScanner` component into your React application and provide an `onCapture` callback to handle the scanned images.
+Import the `DocumentScanner` component into your React application and provide the callback props to handle scanning events.
+
+### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `onCapture` | `(images: string[]) => void` | Yes | Callback fired when user finishes scanning. Receives an array of base64 image data URLs. |
+| `onClose` | `() => void` | No | Callback fired when user taps the close button (X) to exit the scanner without capturing. |
+
+### Example
 
 ```jsx
 import React, { useState } from 'react';
@@ -28,18 +37,33 @@ import DocumentScanner from '@uziee/document-scanner';
 
 function App() {
   const [showScanner, setShowScanner] = useState(false);
+  const [scannedImages, setScannedImages] = useState([]);
 
   const handleCapture = (images) => {
-    images.forEach((image, index) => {
-      console.log(`Captured image ${index + 1}:`, image);
-    });
+    console.log(`Captured ${images.length} document(s)`);
+    setScannedImages(images);
+    setShowScanner(false);
+  };
+
+  const handleClose = () => {
+    // User closed the scanner without capturing
     setShowScanner(false);
   };
 
   return (
     <div>
       <button onClick={() => setShowScanner(true)}>Scan Document</button>
-      {showScanner && <DocumentScanner onCapture={handleCapture} />}
+      
+      {showScanner && (
+        <DocumentScanner 
+          onCapture={handleCapture} 
+          onClose={handleClose} 
+        />
+      )}
+
+      {scannedImages.map((img, i) => (
+        <img key={i} src={img} alt={`Scanned ${i + 1}`} />
+      ))}
     </div>
   );
 }
@@ -47,4 +71,13 @@ function App() {
 export default App;
 ```
 
-The component renders a full-screen camera interface for document scanning. It detects documents in real-time, applies stability filtering, and captures high-resolution images with perspective correction. Ensure your application has camera permissions enabled for the component to function properly.
+The component renders a full-screen camera interface for document scanning. It detects documents in real-time, applies stability filtering, and captures high-resolution images with perspective correction.
+
+### UI Controls
+
+- **Close Button (X)**: Located in the top-right corner. Calls `onClose` to exit without capturing.
+- **Status Indicator**: Shows "POSITION DOCUMENT" or "READY TO SCAN" based on detection state.
+- **Shutter Button**: Captures the current document when detection is stable.
+- **Thumbnail/Done**: Shows captured images count; tap to finish and return all images via `onCapture`.
+
+Ensure your application has camera permissions enabled for the component to function properly.