react-geetest-v4 is a library for React integration for GeeTest Captcha v4.

• Installation
• Usage
• Demo
• Documentation
• Contributing
• License

📦 Installation

npm install react-geetest-v4

pnpm

pnpm install react-geetest-v4

yarn

yarn add react-geetest-v4

📖 Usage

Component Usage

The simplest way to get started. Use the GeeTest component directly in your JSX.

import React from 'react';
import GeeTest, { GeeTestRef } from 'react-geetest-v4';

export default function App() {
  const captchaRef = React.useRef<GeeTestRef | null>(null);

  return (
    <div>
      {/* Invisible bind mode */}
      <GeeTest
        ref={captchaRef}
        captchaId='YOUR_CAPTCHA_ID'
        product='bind'
        onSuccess={(result) => console.log('Success:', result)}
      >
        <button onClick={() => captchaRef.current?.showCaptcha()}>
          Submit Form
        </button>
      </GeeTest>

      {/* Popup mode */}
      <GeeTest
        captchaId='YOUR_CAPTCHA_ID'
        product='popup'
        onSuccess={(result) => console.log('Verified:', result)}
      />
    </div>
  );
}

Hook Usage

For more advanced use cases, use the useGeeTest hook to manage the captcha state manually.

import { useGeeTest } from 'react-geetest-v4';

export default function App() {
  const { captcha, state } = useGeeTest('YOUR_CAPTCHA_ID', {
    product: 'bind',
  });

  const handleAction = () => {
    if (state === 'ready') {
      captcha?.showCaptcha();
    }
  };

  return <button onClick={handleAction}>Verify</button>;
}

Server-side Validation

Validate the captcha result on your server using the provided utilities.

import { generateSignToken, validateCaptcha } from 'react-geetest-v4';

// In your API handler
async function handler(req, res) {
  const { captcha_output, gen_time, lot_number, pass_token } = req.body;

  const { result } = await validateCaptcha({
    captcha_id: process.env.GEETEST_ID,
    lot_number,
    captcha_output,
    pass_token,
    gen_time,
    sign_token: generateSignToken(lot_number, process.env.GEETEST_KEY),
  });

  if (result === 'success') {
    // Captcha passed
  }
}

🚀 Demo

Check out the demo directory for a complete full-stack example using Hono and Vite.

cd demo
pnpm install
pnpm dev

📚 Documentation

For detailed configuration options, visit the API Documentation.

🤝 Contributing

Want to contribute? Awesome! To show your support is to star the project, or to raise issues on GitHub.

Thanks again for your support, it is much appreciated! 🙏

License

MIT © Shahrad Elahi and contributors.