RetinaFace React SDK

A React SDK for integrating with the RetinaFace Face Recognition API.

Installation

npm install @yanzongzhen/retina-face-sdk
# or
yarn add @yanzongzhen/retina-face-sdk

Usage

1. Initialize the Client

import { FaceAuth } from "@yanzongzhen/retina-face-sdk";

const faceAuth = new FaceAuth({
  baseUrl: "http://localhost:8000", // Your backend API URL
  threshold: 0.5, // Optional match threshold
});

2. Use the Modal Component

The SDK provides a FaceAuthModal component that handles camera capture and API interaction.

import { useState } from "react";
import { FaceAuth, FaceAuthModal } from "@yanzongzhen/retina-face-sdk";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Face Auth</button>

      <FaceAuthModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        faceAuth={faceAuth}
        mode="verify" // 'enroll' | 'verify' | 'search'
        userId="user-123" // Required for 'enroll' and 'verify'
        onSuccess={(data) => console.log("Success:", data)}
        onError={(err) => console.error("Error:", err)}
      />
    </>
  );
}

API Reference

FaceAuth

• enroll(userId, blob, metadata): Register a new face.
• verify(userId, blob): Verify a face against a user ID.
• search(blob): Search for a face in the database.

FaceAuthModal Props

| Prop | Type | Description | |Col | Col | Col| | isOpen | boolean | Whether the modal is open | | onClose | function | Callback to close the modal | | faceAuth | FaceAuth | Instance of FaceAuth class | | mode | string | 'enroll', 'verify', or 'search' | | userId | string | User ID (required for enroll/verify) | | lang | string | 'en' or 'zh' (default: 'en') | | autoCapture | number | Auto-capture delay in ms (optional) |