react-smart-captcha

react-smart-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-smart-captcha framer-motion sonner

Usage Example

"use client";

import React from "react";
import { Captcha } from "react-smart-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

Prop	Type	Description	Default
type	"canvas" | "math"	Captcha type (Canvas text captcha or Math question)	"canvas"
length	number	Number of characters in the captcha (Canvas only)	6
width	number	Width of the captcha display	180
height	number	Height of the captcha display	50
fontSize	number	Font size for the captcha text	28
fontFamily	string	Font family for captcha text	"Arial"
backgroundColor	string	Background color of captcha	"#f9f9f9"
textColor	string	Text color for captcha	"#333"
noise	number	Amount of noise (dots) on Canvas Captcha	30
placeholder	string	Input field placeholder text	"Enter captcha"
errorMessage	string	Error message shown on invalid captcha	"Invalid captcha"
successMessage	string	Success message shown on valid captcha	"Captcha valid"
autoValidate	boolean	Automatically validate input on complete input	true
animationDuration	number	Duration of animations in seconds	0.4
onValidate	(isValid: boolean) => void	Callback fired after validation, with success status	undefined

License

This project is licensed under the MIT License.