@checklydz/react-sdk

Official React SDK for ChecklyDZ identity verification with pure CSS and multi-language support (EN, FR, AR).

Features

✨ Zero CSS Conflicts - Works with any CSS framework (Tailwind, Bootstrap, Material-UI, etc.)
🌍 Multi-language - English, French, Arabic with RTL support
📱 Responsive - Mobile and desktop optimized
♿ Accessible - ARIA-compliant, keyboard navigation
🎨 Modern Design - Clean, professional UI
⚡ Lightweight - Pure CSS, no framework overhead

Installation

npm install @checklydz/react-sdk

Quick Start

import { IdCheckWidget } from '@checklydz/react-sdk';
import '@checklydz/react-sdk/dist/index.css';

function App() {
  return (
    <IdCheckWidget
      apiKey="YOUR_SERVER_API_KEY"
      onComplete={(result) => {
        console.log('Verification result:', result);
        // { validation_id, status, similarity, threshold, ocr }
      }}
    />
  );
}

API Reference

IdCheckWidget Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | ✅ Yes | Your server's API key from ChecklyDZ dashboard | | onComplete | (result: VerificationResult) => void | ❌ No | Callback when verification completes |

VerificationResult

{
  validation_id: string;      // Unique validation ID
  status: "APPROVED" | "PENDING" | "ERROR";
  similarity?: number;        // Face match score (0-1)
  threshold?: number;         // Required threshold
  ocr?: {                     // Extracted ID data
    firstName: string;
    lastName: string;
    birthDate: string;
    // ... other fields
  };
  raw?: any;                  // Full API response
}

Language Support

The SDK automatically detects the browser language and supports:

• 🇬🇧 English (en) - Default
• 🇫🇷 French (fr)
• 🇩🇿 Arabic (ar) - with RTL layout

Users can switch languages using the built-in language selector.

Requirements

• ✅ React 17+
• ✅ HTTPS (required for camera access)
• ✅ Modern browser with camera support

Works With Any CSS Framework

This SDK uses scoped CSS classes (prefixed with .idcheck-*) so it works seamlessly with:

• ✅ Tailwind CSS
• ✅ Bootstrap
• ✅ Material-UI
• ✅ Ant Design
• ✅ Chakra UI
• ✅ Any other CSS framework

No conflicts, guaranteed!

Migration from v0.2.x

If you were using IdVerificationFlow:

// Before (v0.2.x)
import { IdVerificationFlow } from '@checklydz/react-sdk';

// After (v0.3.x)
import { IdCheckWidget } from '@checklydz/react-sdk';
import '@checklydz/react-sdk/dist/index.css'; // Don't forget!

License

MIT

Support

• 📧 Email: [email protected]
• 🌐 Website: https://checklydz.com
• 📚 Docs: https://checklydz.com/docs