Of course. Here is a comprehensive and professional README file for your SDK. You can copy and paste this directly into a README.md file in the root of your project.

SnapKYC Aadhaar QR SDK

A lightweight and easy-to-use React component library for integrating Aadhaar QR code verification into your web application. This SDK provides a simple modal component that handles QR code generation, status polling, and returns verified user data.

It's built with TypeScript, ensuring full type safety for a seamless development experience. 🚀

Features

• Simple Integration: Add Aadhaar verification to your app with just one component.
• Automatic Flow: Handles QR code generation and server polling for verification status automatically.
• Clean UI: Provides a clean, responsive modal (QRModal) that works on all screen sizes.
• Type-Safe: Fully written in TypeScript, providing excellent autocompletion and type checking.
• Lightweight: Minimal dependencies to keep your application's bundle size small.

Installation

You can install the package using npm or yarn.

npm install snapkyc-qrcode

or

yarn add snapkyc-qrcode

Usage

Here's a basic example of how to use the QRModal component in your React application.

import React, { useState } from 'react';
// 1. Import the component and its types from the SDK
import { QRModal, VerifiedData } from 'snapkyc-qrcode';

function MyProfilePage() {
  // 2. State to control the modal's visibility
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 3. State to store the verified user data
  const [aadhaarData, setAadhaarData] = useState<VerifiedData | null>(null);

  // 4. Callback function to handle the successful verification
  const handleVerificationSuccess = (data: VerifiedData) => {
    console.log("Verification Successful!", data);
    setAadhaarData(data);
    // You can now use the data to fill a form, update your backend, etc.
  };

  return (
    <div>
      <h1>My Profile Verification</h1>

      {aadhaarData ? (
        <div>
          <h2>✅ Verification Complete!</h2>
          <p><strong>Name:</strong> {aadhaarData.name}</p>
          <p><strong>Date of Birth:</strong> {aadhaarData.dateOfBirth}</p>
          {aadhaarData.image && 
            <img 
              src={aadhaarData.image} 
              alt="Aadhaar Photograph" 
              style={{ width: '150px', borderRadius: '8px' }} 
            />
          }
        </div>
      ) : (
        <button onClick={() => setIsModalOpen(true)}>
          Verify with Aadhaar
        </button>
      )}

      {/* 5. Add the QRModal to your component */}
      <QRModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onVerificationSuccess={handleVerificationSuccess}
      />
    </div>
  );
}

export default MyProfilePage;

Component API

<QRModal />

This is the main component you will use. It displays the modal window for the QR code verification process.

| Prop | Type | Required | Description | | ----------------------- | ----------------------------------- | -------- | -------------------------------------------------------------------------- | | isOpen | boolean | Yes | Controls whether the modal is visible or not. | | onClose | () => void | Yes | Function called when the user closes the modal (e.g., by clicking the 'X'). | | onVerificationSuccess | (verifiedData: VerifiedData) => void | Yes | Callback function that receives the user data upon successful verification. |

Data Structure

VerifiedData

The onVerificationSuccess callback returns an object with the following structure. All fields are optional and will be present based on the data shared by the user.

interface VerifiedData {
  name?: string;
  mobile?: string;
  email?: string;
  address?: string;
  // The image is a Base64 encoded data URL string
  image?: string; 
  dateOfBirth?: string;
  aadhaarNumber?: string;
  // Any other disclosed fields will be added here
  [key: string]: string | boolean | undefined;
}

License

Distributed under the MIT License. See LICENSE file for more information.