captcha-component-react-next-custom v1.0.0

captcha-component-react-next-custom

English Documentation

📦 Installation

To install this package, run the following command:

npm install captcha-component-react-next-custom

🚀 Usage

In React with TypeScript

import React from "react";
import Captcha from "captcha-component-react-next-custom";

const App = () => {
  return (
    <div>
      <Captcha
        charCount={6}
        backgroundColor="#f3f4f6"
        onChange={(isValid) => console.log(isValid)}
      />
    </div>
  );
};

export default App;

📘 API Documentation

Properties

Examples

1. Customizing the CAPTCHA length

<Captcha charCount={4} onChange={(isValid) => console.log(isValid)} />

2. Changing the background color

<Captcha backgroundColor="#000000" />

3. Enabling case-sensitive validation

<Captcha caseSensitive={true} />

4. Adjusting noise density and lines

<Captcha noiseDensity={200} lineCount={10} />

5. Customizing the font and padding

<Captcha font="Courier New" padding={20} />

📂 Project Structure

📁 src/
 ├── 📁 components/ (Includes `Captcha.tsx`)
 ├── 📁 types/ (TypeScript definitions like `CaptchaProps.ts`)
 ├── 📁 utils/ (Utility functions like `drawCaptcha.ts` and `generateRandomCode.ts`)
 └── 📄 index.ts (Package entry point)

🧪 Testing

To run tests, use the following command:

npm test

📜 License

This package is licensed under the MIT license.

🤝 Contribution

If you want to contribute to this project, please submit a Pull Request!

📞 Contact

• Email: behnambashiri80@gmail.com
• GitHub: Behnam-Bashiri

مستندات فارسی

📦 نصب

برای نصب این پکیج، دستور زیر را اجرا کنید:

npm install captcha-component-react-next-custom

🚀 استفاده

در React با TypeScript

import React from "react";
import Captcha from "captcha-component-react-next-custom";

const App = () => {
  return (
    <div>
      <Captcha
        charCount={6}
        backgroundColor="#f3f4f6"
        onChange={(isValid) => console.log(isValid)}
      />
    </div>
  );
};

export default App;

📘 مستندات API

پراپرتی‌ها

مثال‌ها

1. تنظیم تعداد کاراکترهای کپچا

<Captcha charCount={4} onChange={(isValid) => console.log(isValid)} />

2. تغییر رنگ پس‌زمینه

<Captcha backgroundColor="#000000" />

3. فعال‌سازی اعتبار حساس به حروف کوچک و بزرگ

<Captcha caseSensitive={true} />

4. تنظیم تراکم نویز و خطوط

<Captcha noiseDensity={200} lineCount={10} />

5. سفارشی‌سازی فونت و فاصله‌گذاری

<Captcha font="Courier New" padding={20} />

📂 ساختار پروژه

📁 src/
 ├── 📁 components/ (شامل `Captcha.tsx`)
 ├── 📁 types/ (تعاریف TypeScript مانند `CaptchaProps.ts`)
 ├── 📁 utils/ (توابع کمکی مانند `drawCaptcha.ts` و `generateRandomCode.ts`)
 └── 📄 index.ts (نقطه ورود پکیج)

🧪 تست

برای اجرای تست‌ها از این دستور استفاده کنید:

npm test