Arcaptcha Component Library Next.js Example

Description

Arcaptcha is a drop-replacement for reCAPTCHA and hCaptcha that protects user privacy, rewards websites, and helps companies get their data labeled.

Sign up at Arcaptcha to get your sitekey today. You need a sitekey to use this library.

This repository is a Next.js example project for using React Arcaptcha Component Library.

Installation

# Clone the repository
git clone https://github.com/arcaptcha/arcaptcha-nextjs-example.git

# Install dependencies
npm install

# Run development server
npm run dev

Usage

The requirement for usage is the site-key prop. The component will automatically include and load the Arcaptcha API library and append it to the body.

• Basic in TypeScript:

"use client";

import React, { Component, createRef } from "react";
import { ArcaptchaWidget, ArcaptchaWidgetHandle } from "arcaptcha-react";

class ArcaptchaReact extends Component {
  ArRef = createRef<ArcaptchaWidgetHandle>();

  getToken = (token?: string) => {
    console.log("Captcha token from callback:", token);
  };

  render() {
    return (
      <div>
        <h2>Arcaptcha Basic Widget (Class Component)</h2>
        <ArcaptchaWidget
          ref={this.ArRef}
          site-key="YOUR_SITE_KEY"
          callback={this.getToken}
          theme="dark"
          lang="en"
        />
      </div>
    );
  }
}

export default ArcaptchaReact;