@baanihali/captcha/dist/index.d.ts

A customizable sliding puzzle captcha component for React applications with server-side validation

import { createCaptcha } from './server/index.js';

/**
 * Props for the CustomCaptchaComponent
 * @interface CustomCaptchaProps
 */
interface CustomCaptchaProps {
    /** Whether the captcha is currently loading */
    loading: boolean;
    /**
     * Function to refresh/generate a new captcha
     * @returns Promise resolving to captcha data containing background image, puzzle piece, unique ID or error.
     */
    refreshCaptcha: () => Promise<Awaited<ReturnType<typeof createCaptcha>> | {
        error: string;
    } | undefined | null>;
    /**
     * Function to verify the captcha solution
     * @param id - The captcha ID
     * @param value - The slider position value as string
     * @returns Promise resolving to verification result
     */
    verifyCaptcha: (id: string, value: string) => Promise<{
        success?: boolean;
        error?: string;
    }>;
}
/**
 * A customizable sliding puzzle captcha component for React applications.
 *
 * This component provides a user-friendly captcha verification system where users
 * slide a puzzle piece to the correct position on a background image.
 *
 * @component
 * @example
 * ```tsx
 * import CaptchaComponent from 'custom-captcha/client';
 *
 * function MyForm() {
 *   const [loading, setLoading] = useState(false);
 *
 *   const handleRefresh = async () => {
 *     // Your implementation to fetch new captcha data
 *     return {
 *       background: 'data:image/jpeg;base64,...' or 'https://....',
 *       puzzle: 'data:image/jpeg;base64,...' or 'https://....',
 *       id: 'unique-captcha-id'
 *     };
 *   };
 *
 *   const handleVerify = async (id: string, value: string) => {
 *     // Your implementation to verify the captcha
 *     return { success: true };
 *   };
 *
 *   return (
 *     <CaptchaComponent
 *       loading={loading}
 *       refreshCaptcha={handleRefresh}
 *       verifyCaptcha={handleVerify}
 *     />
 *   );
 * }
 * ```
 *
 * @param props - The component props
 * @returns JSX element representing the captcha component
 *
 * @version 1.0.0
 * @author Murtaza Baanihali
 * @license MIT
 */
declare const CaptchaComponent: ({ loading, refreshCaptcha, verifyCaptcha, }: CustomCaptchaProps) => JSX.Element;

export { CaptchaComponent, type CustomCaptchaProps };