react-secure-captcha

A highly customizable React Captcha component featuring multiple captcha types including Canvas and Math modes, smooth animations powered by Framer Motion, and user-friendly toast notifications via Sonner.

Features

• Canvas Captcha with customizable text, noise, colors, and fonts.
• Math Captcha presenting simple arithmetic questions.
• Smooth animations for captcha refresh and error feedback using Framer Motion.
• Toast notifications for success and error messages with Sonner.
• Fully configurable props for maximum flexibility.
• Supports auto-validation or manual validation modes.
• Lightweight, TypeScript-based and ready for production.
• Accessible with proper ARIA attributes.

Installation

Install the package and its peer dependencies:

npm install react-secure-captcha framer-motion sonner

Usage Example

"use client";

import React from "react";
import { Captcha } from "react-secure-captcha";
import { Toaster } from "sonner";

export default function CaptchaExample() {
  const handleValidation = (isValid: boolean) => {
    console.log("Captcha valid?", isValid);
  };

  return (
    <>
      <Toaster />
      <Captcha
        type="canvas"
        length={6}
        onValidate={handleValidation}
        placeholder="Enter captcha here"
      />
    </>
  );
}

Props

License

This project is licensed under the MIT License.