Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-secure-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.