Google reCAPTCHA React

https://siberiacancode.github.io/google-recaptcha/docs/react
Admin
A React library that provides hooks, components, and providers for seamlessly integrating Google...
Tokens:7,721
Snippets:69
Trust Score:8.3
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install @google-recaptcha/react

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/vite

Install the necessary package for Google reCAPTCHA integration using npm. This is the first step before configuring the provider or using the hook.

```bash
npm install @google-recaptcha/react
```

--------------------------------

### Setup GoogleReCaptchaProvider with Vite

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/vite

Configure the GoogleReCaptchaProvider in your root component (e.g., src/main.tsx) to enable reCAPTCHA functionality. Ensure you replace 'your_site_key' with your actual reCAPTCHA site key. This setup is typically used with Vite.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { GoogleReCaptchaProvider } from '@google-recaptcha/react'; 

import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <GoogleReCaptchaProvider
      type="v3"
      siteKey="your_site_key"
    >
      <App />
    </GoogleReCaptchaProvider>
  </React.StrictMode>
);

```

--------------------------------

### Setup Google reCAPTCHA Provider in React Application

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/index

Set up the `GoogleReCaptchaProvider` by wrapping your application. This provider manages reCAPTCHA script loading and provides context to child components. It supports reCAPTCHA v3, v2-checkbox, and v2-invisible with a provided site key.

```javascript
import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v3 | v2-checkbox | v2-invisible' siteKey='your_site_key'>
    ...
  </GoogleReCaptchaProvider>
);
```

--------------------------------

### React Provider Setup for Google reCAPTCHA

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v3

Wrap your application with the GoogleReCaptchaProvider to manage reCAPTCHA script loading and provide context to child components. This is essential for all reCAPTCHA functionality. It accepts 'type' and 'siteKey' as props.

```jsx
import React from 'react';
import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v3' siteKey='your_site_key'>
    ...
  </GoogleReCaptchaProvider>
);
```

--------------------------------

### React Provider Setup for Google reCAPTCHA Enterprise

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v3

Configure the GoogleReCaptchaProvider for enterprise mode by adding the 'isEnterprise' prop. This enables advanced security features and analytics. The 'type' and 'siteKey' props are also required.

```jsx
<GoogleReCaptchaProvider type='v3' siteKey='your_enterprise_site_key' isEnterprise>
  <App />
</GoogleReCaptchaProvider>
```

--------------------------------

### Provider Setup for Google reCAPTCHA v2 Checkbox in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v2-checkbox

Wraps the application with GoogleReCaptchaProvider to manage reCAPTCHA script loading and provide context. Requires specifying the reCAPTCHA type and a site key. This setup is essential for all reCAPTCHA functionalities.

```javascript
import React from 'react';
import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v2-checkbox' siteKey='your_site_key'>
    ...
  </GoogleReCaptchaProvider>
);
```

--------------------------------

### Enterprise Mode Setup for Google reCAPTCHA v2 Checkbox in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v2-checkbox

Enables enterprise mode for Google reCAPTCHA, offering enhanced security, analytics, and customization. This is achieved by setting `isEnterprise` to true in the `GoogleReCaptchaProvider`. Requires a specific enterprise site key.

```javascript
<GoogleReCaptchaProvider type='v2-checkbox' siteKey='your_enterprise_site_key' isEnterprise>
  <App />
</GoogleReCaptchaProvider>
```

--------------------------------

### Configure Explicit Rendering for v3 and v2-invisible reCAPTCHA in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/guides/explicit

This example shows how to configure explicit rendering for v3 and v2-invisible reCAPTCHA types. You can use the 'explicit' object to specify the badge's position and size, or use 'explicit: true' along with the GoogleReCaptchaBadge component for custom placement. A container element is also defined for the widget.

```jsx
<GoogleReCaptchaProvider
  type='v3 | v2-invisible'
  siteKey='your_site_key'
  explicit={{
    container: 'container',
    badge: 'bottomleft',
    size: 'compact'
  }}>
  <div id='container' />
</GoogleReCaptchaProvider>
```

```jsx
<GoogleReCaptchaProvider type='v3 | v2-invisible' siteKey='your_site_key' explicit>
  <GoogleReCaptchaBadge />
</GoogleReCaptchaProvider>
```

--------------------------------

### Getting reCAPTCHA Response Token (React Context)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The `getResponse` function, available through the reCAPTCHA context, retrieves the current reCAPTCHA response token. This token can be sent to your server for verification. Use this function when you need to access the latest token without necessarily triggering a new verification.

```javascript
const { getResponse } = useGoogleReCaptcha();

// To get the current token:
const token = getResponse();
```

--------------------------------

### Set up Google reCAPTCHA Provider (React)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v2-invisible

Wraps the application with the GoogleReCaptchaProvider to manage reCAPTCHA script loading and provide context. Requires the 'v2-invisible' type and a site key.

```javascript
import React from 'react';
import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v2-invisible' siteKey='your_site_key'>
    ...
  </GoogleReCaptchaProvider>
);
```

--------------------------------

### Create Client Provider Component for Next.js

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/next

Sets up a client provider component for Google reCAPTCHA in a Next.js application. This component wraps the core reCAPTCHA provider and allows for client-side rendering, which is essential for reCAPTCHA functionality.

```typescript
"use client";

import type { ComponentProps } from "react";
import { GoogleReCaptchaProvider as _GoogleReCaptchaProvider } from "@google-recaptcha/react";

export type ReCaptchaProviderProps = ComponentProps<typeof _GoogleReCaptchaProvider>;

export const GoogleReCaptchaProvider = (props) => (
  <_GoogleReCaptchaProvider {...props} />
);
```

--------------------------------

### Configure Google reCAPTCHA Provider for Enterprise

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/enterprise

Sets up the Google reCAPTCHA provider with enterprise mode enabled. Requires a site key and specifies the reCAPTCHA type. This is essential for utilizing enterprise-specific security features.

```javascript
import React from 'react';
import { GoogleReCaptchaProvider } from '@google-recaptcha/react';

export const App = () => (
  <GoogleReCaptchaProvider type='v3 | v2-checkbox' siteKey='your_enterprise_site_key' isEnterprise>
    ...
  </GoogleReCaptchaProvider>
);
```

--------------------------------

### Execute reCAPTCHA v3 Action in React with Next.js

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/next

Demonstrates how to use the `useGoogleReCaptcha` hook within a React component in a Next.js application to execute a reCAPTCHA v3 action. This hook provides access to the reCAPTCHA API, allowing you to obtain a token for verification.

```javascript
const googleReCaptcha = useGoogleReCaptcha();

const onSubmit = async () => {
  const token = await googleReCaptcha.executeV3('action');
  ...
}
```

--------------------------------

### Use Google reCAPTCHA v2 Invisible Hook (React)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v2-invisible

Demonstrates how to use the useGoogleReCaptcha hook to execute the v2 invisible reCAPTCHA. It includes a check for the availability of the executeV2Invisible function and retrieves the token.

```javascript
import React from 'react';
import { useGoogleReCaptcha } from '@google-recaptcha/react';

const App = () => {
  const googleReCaptcha = useGoogleReCaptcha();

  const onVerify = async () => {
    if (!googleReCaptcha.executeV2Invisible) {
      console.log('Execute recaptcha not available');
      return;
    }

    const token = await googleReCaptcha.executeV2Invisible();
  };

  return <button onClick={onVerify}>verify</button>;
};
```

--------------------------------

### Use reCAPTCHA v3 Enterprise for Verification

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/enterprise

Implements the useGoogleReCaptcha hook to execute reCAPTCHA v3 verification. This allows for background verification with advanced risk assessment and analytics. It checks for the existence of `executeV3` before attempting execution.

```javascript
import React from 'react';
import { useGoogleReCaptcha } from '@google-recaptcha/react';

const App = () => {
  const googleReCaptcha = useGoogleReCaptcha();

  const onVerify = async () => {
    if (!googleReCaptcha.executeV3) {
      console.log('Execute recaptcha not available');
      return;
    }

    const token = await googleReCaptcha.executeV3('action');
  };

  return <button onClick={onVerify}>verify</button>;
};
```

--------------------------------

### Optimize reCAPTCHA Script Loading in Next.js Layout

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/next

Optimizes the loading of the reCAPTCHA script in a Next.js application by using the `next/script` component. This approach ensures the script is loaded efficiently, and the `GoogleReCaptchaProvider` prevents duplicate script tags if the script is already present.

```typescript
import type { ReactNode } from 'react';
import Script from 'next/script';

import { GoogleReCaptchaProvider } from './google-recaptcha-provider';

interface RootLayoutProps {
  children: ReactNode;
}

const RootLayout = ({ children }: RootLayoutProps) => {
  const scriptSrc = generateGoogleReCaptchaScriptSrc({
    isEnterprise: false,
    render: 'your_site_key',
    hl: 'en'
  });

  return (
    <html lang='en'>
      <head>
        <Script src={scriptSrc} strategy='afterInteractive' />
      </head>
      <body>
        <main>
          <GoogleReCaptchaProvider type='v3' siteKey='your_site_key'>
            {children}
          </GoogleReCaptchaProvider>
        </main>
      </body>
    </html>
  );
};

export default RootLayout;
```

--------------------------------

### Access Google reCAPTCHA Instance in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/useGoogleReCaptcha

The `useGoogleReCaptcha` hook provides access to the reCAPTCHA instance and its associated states and methods within React functional components. It requires the reCAPTCHA script to be loaded. Returns an object containing the instance, loading state, language, site key, and various control functions.

```javascript
const {
  instance,
  isLoading,
  language,
  siteKey,
  executeV3,
  executeV2Invisible,
  reset,
  getResponse,
  render
} = useGoogleReCaptcha();
```

--------------------------------

### Executing reCAPTCHA v3 Verification (React Context)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The `executeV3` function, available via the reCAPTCHA context, allows you to programmatically trigger reCAPTCHA v3 verification. It accepts an optional 'action' parameter and returns a Promise that resolves with the verification token. Ensure the provider is correctly configured before calling this function.

```javascript
const { executeV3 } = useGoogleReCaptcha();

// To execute with a default action:
const token = await executeV3();

// To execute with a custom action:
const customToken = await executeV3('submit_form');
```

--------------------------------

### Add Google reCAPTCHA Provider to Next.js Layout

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/next

Integrates the Google reCAPTCHA provider into the main layout component of a Next.js application. This ensures that the reCAPTCHA context is available throughout the application. Requires a 'siteKey' and specifies the reCAPTCHA type (e.g., 'v3').

```typescript
import type { ReactNode } from "react";
import { GoogleReCaptchaProvider } from "./google-recaptcha-provider"; 

interface RootLayoutProps {
  children: ReactNode;
}

const RootLayout = ({ children }: RootLayoutProps) => (
  <html lang="en">
    <body>
      <main>
        <GoogleReCaptchaProvider type="v3" siteKey="your_site_key">
          {children}
        </GoogleReCaptchaProvider>
      </main>
    </body>
  </html>
);

export default RootLayout;
```

--------------------------------

### Configure reCAPTCHA Theme in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/guides/theme

Set the visual theme (light or dark) for Google reCAPTCHA widgets within a React application. This configuration is applied at the provider level and supports v3, v2 invisible, and v2 checkbox reCAPTCHA types. No external dependencies are required beyond the google-recaptcha-react library.

```jsx
<GoogleReCaptchaProvider
  type='v3 | v2-checkbox | v2-invisible'
  siteKey='your_site_key'
  theme='dark | light'
>
  {children}
</GoogleReCaptchaProvider>
```

--------------------------------

### Generate Hidden reCAPTCHA Badge Styles (JavaScript)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/generateGoogleReCaptchaHiddenBadgeStyles

A utility function to generate CSS styles for hiding the Google reCAPTCHA badge. This is useful for maintaining compliance while visually hiding the badge. Ensure a visible reCAPTCHA notice is provided on the page.

```javascript
const styles = generateGoogleReCaptchaHiddenBadgeStyles();
```

--------------------------------

### GoogleReCaptchaBadge Component

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaBadge

A pre-built React component for rendering the v2 badge reCAPTCHA. It allows configuration of language, theme, and callbacks for verification events.

```APIDOC
## GoogleReCaptchaBadge Component

### Description
Pre-built badge component for v2 badge reCAPTCHA. It allows for customization of language, theme, and handling of verification events.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **id** (string) - Optional - The ID of the checkbox container. Defaults to `'google-recaptcha-checkbox-container'`.
- **language** (string) - Optional - The language for the reCAPTCHA widget.
- **theme** ('light' | 'dark') - Optional - The color theme of the widget. Defaults to `'light'`.
- **onChange** ((token: string) => void) - Optional - Callback function when verification is successful.
- **onError** (() => void) - Optional - Callback function when reCAPTCHA encounters an error.
- **onExpired** (() => void) - Optional - Callback function when the reCAPTCHA response expires.

*The component extends standard `div` props.*

### Request Example
```jsx
<GoogleReCaptchaBadge 
  language="en"
  theme="dark"
  onChange={token => console.log('Verified:', token)}
  onError={() => console.error('reCAPTCHA error')}
  onExpired={() => console.log('reCAPTCHA expired')}
/>
```

### Response
#### Success Response
N/A (Component renders UI elements)

#### Response Example
N/A
```

--------------------------------

### Generate Google reCAPTCHA Script Source URL

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/generateGoogleReCaptchaScriptSrc

Generates the script source URL for Google reCAPTCHA. It accepts parameters like host, enterprise version, render mode, language, and badge position. The function returns a string representing the complete URL.

```javascript
const scriptSrc = generateGoogleReCaptchaScriptSrc({
  host,
  isEnterprise,
  render,
  hl,
  badge
});
```

--------------------------------

### Rendering reCAPTCHA Widget (React Context)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The `render` function from the reCAPTCHA context is used to manually render the reCAPTCHA widget. This can be useful in scenarios where automatic rendering is not desired or needs to be controlled programmatically. Call this function after the component has mounted and the necessary configurations are in place.

```javascript
const { render } = useGoogleReCaptcha();

// To manually render the widget:
render();
```

--------------------------------

### GoogleReCaptchaProviderContext Values

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The context values provided by GoogleReCaptchaProvider that can be consumed by child components.

```APIDOC
## GoogleReCaptchaProviderContext Values

### Description
These properties are available via the `useGoogleReCaptcha()` hook and provide access to the reCAPTCHA instance, loading status, and control functions.

### Method
Context Hook (`useGoogleReCaptcha()`)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```jsx
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";

function MyComponent() {
  const { executeV3, reset } = useGoogleReCaptcha();

  const handleVerify = async () => {
    if (executeV3) {
      const token = await executeV3('homepage');
      // Send token to your backend
    }
  };

  return (
    <button onClick={handleVerify}>Verify with reCAPTCHA v3</button>
  );
}
```

### Response
#### Success Response (200)
N/A

#### Response Example
```json
{
  "instance": "ReCaptchaInstance object or null",
  "isLoading": "boolean",
  "language": "string",
  "siteKey": "string",
  "executeV3": "function",
  "executeV2Invisible": "function",
  "reset": "function",
  "getResponse": "function",
  "render": "function"
}
```

### Context Properties:
- **`instance`** (ReCaptchaInstance | null): The reCAPTCHA instance. Null if not yet loaded.
- **`isLoading`** (boolean): Indicates whether the reCAPTCHA script is still loading.
- **`language`** (string): The language code used for reCAPTCHA.
- **`siteKey`** (string): The site key used for reCAPTCHA.
- **`executeV3`** (function): Executes reCAPTCHA v3 verification. Returns a promise that resolves to the verification token. Accepts an optional `action` string.
- **`executeV2Invisible`** (function): Executes reCAPTCHA v2 invisible verification. Returns a promise that resolves to the verification token.
- **`reset`** (function): Resets the reCAPTCHA widget.
- **`getResponse`** (function): Gets the current reCAPTCHA response token.
- **`render`** (function): Renders the reCAPTCHA widget (primarily for v2 types).
```

--------------------------------

### GoogleReCaptchaProvider Component Usage (React)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The GoogleReCaptchaProvider is a React component that wraps your application or a section of it to enable Google reCAPTCHA integration. It requires essential props like 'type' and 'siteKey'. It also accepts various optional props to customize the reCAPTCHA behavior and appearance.

```jsx
<GoogleReCaptchaProvider
  type
  siteKey
  language
  scriptProps
  isEnterprise
  host
  theme
  explicit
  onLoad
  onError
>
  {children}
</GoogleReCaptchaProvider>
```

--------------------------------

### Use useGoogleReCaptcha Hook in a React Component

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/integrations/vite

Utilize the useGoogleReCaptcha hook within a functional component to access reCAPTCHA functionalities, such as executing reCAPTCHA v3. The hook provides an executeV3 method that returns a token upon successful execution.

```tsx
import type { FormEvent } from 'react';
import { useGoogleReCaptcha } from '@google-recaptcha/react';

export const Form = () => {
  const googleReCaptcha = useGoogleReCaptcha();

  const onSubmit = async (event: FormEvent) => {
    event.preventDefault();

    const token = await googleReCaptcha.executeV3('action');
    // Use the token for verification on your backend
    ...
  };

  return (
    <form onSubmit={onSubmit}>
      ...
      <button type="submit">Submit</button>
    </form>
  );
}

```

--------------------------------

### Executing reCAPTCHA v2 Invisible Verification (React Context)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The `executeV2Invisible` function from the reCAPTCHA context enables programmatic triggering of reCAPTCHA v2 invisible verification. It returns a Promise that resolves with the verification token. This is useful for forms that require invisible reCAPTCHA validation before submission.

```javascript
const { executeV2Invisible } = useGoogleReCaptcha();

// To execute the invisible v2 challenge:
const token = await executeV2Invisible();
```

--------------------------------

### useGoogleReCaptcha Hook

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaBadge

A custom React hook designed to provide access to Google reCAPTCHA functionality within your React components, simplifying integration.

```APIDOC
## useGoogleReCaptcha Hook

### Description
Hook for accessing reCAPTCHA functionality in React components. This hook simplifies the process of interacting with the Google reCAPTCHA API within your application.

### Method
N/A (Hook)

### Endpoint
N/A (Hook)

### Parameters
N/A

### Request Example
```jsx
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';

function MyComponent() {
  const { executeRecaptcha } = useGoogleReCaptcha();

  const handleSubmit = async () => {
    if (!executeRecaptcha) {
      console.log('Execute not available yet');
      return;
    }
    const token = await executeRecaptcha('submit');
    // Send token to backend
  };

  return <button onClick={handleSubmit}>Submit</button>;
}
```

### Response
#### Success Response
N/A (Hook provides functions)

#### Response Example
N/A
```

--------------------------------

### GoogleReCaptchaBadge Component for reCAPTCHA v2

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaBadge

A pre-built React component for displaying the v2 badge reCAPTCHA. It accepts various props to customize its appearance and behavior, including language, theme, and callback functions for verification, errors, and expiration. It extends standard div props.

```javascript
<GoogleReCaptchaBadge badge language theme onChange onError onExpired />
```

--------------------------------

### GoogleReCaptchaCheckbox Component for React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaCheckbox

A pre-built React component for integrating Google's v2 checkbox reCAPTCHA. It accepts various props to customize its appearance and behavior, including action, language, size, theme, and callbacks for verification status and errors. The component extends standard HTML div properties.

```jsx
<GoogleReCaptchaCheckbox
  action="user_login"
  language="en"
  size="compact"
  theme="dark"
  onChange={(token) => console.log('Token:', token)}
  onError={() => console.error('reCAPTCHA error')}
  onExpired={() => console.warn('reCAPTCHA expired')}
/>
```

--------------------------------

### React HOC for Google reCAPTCHA

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/withGoogleReCaptcha

The `withGoogleReCaptcha` higher-order component (HOC) provides access to Google reCAPTCHA functionality for React class components. It injects props like `executeV3`, `executeV2Invisible`, `reset`, and `getResponse` into the wrapped component. Ensure the reCAPTCHA script is loaded before using this HOC.

```javascript
const WithGoogleReCaptchaComponent = withGoogleReCaptcha(Component);
```

--------------------------------

### React Hook for Google reCAPTCHA

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/withGoogleReCaptcha

The `useGoogleReCaptcha` hook provides a convenient way to access Google reCAPTCHA functionality within React functional components. It offers similar functionalities to the `withGoogleReCaptcha` HOC, abstracting the complexity of the reCAPTCHA API.

--------------------------------

### Use reCAPTCHA v2 Checkbox Enterprise

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/enterprise

Integrates the GoogleReCaptchaCheckbox component for enterprise v2 checkbox verification. It captures the token upon successful verification. This component offers enhanced security and analytics for user interaction.

```javascript
import React from 'react';
import { GoogleReCaptchaCheckbox } from '@google-recaptcha/react';

const App = () => (
  <GoogleReCaptchaCheckbox
    action='some action'
    onChange={(token) => console.log(token)}
  />
);
```

--------------------------------

### Configure Explicit Rendering for v2-checkbox in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/guides/explicit

This snippet demonstrates how to configure explicit rendering for the v2-checkbox reCAPTCHA. By default, it's explicit, meaning you must place the GoogleReCaptchaCheckbox component manually. Alternatively, you can use the 'explicit' object to define a container and a callback function for token retrieval.

```jsx
<GoogleReCaptchaProvider type='v2-checkbox' siteKey='your_site_key'>
  <GoogleReCaptchaCheckbox />
</GoogleReCaptchaProvider>
```

```jsx
<GoogleReCaptchaProvider
  type='v2-checkbox'
  siteKey='your_site_key'
  explicit={{
    container: 'container',
    callback: (token) => console.log('Token:', token)
  }}>
  <div id='container' />
</GoogleReCaptchaProvider>
```

--------------------------------

### useGoogleReCaptcha Hook for reCAPTCHA Functionality

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaBadge

A custom React hook designed to provide access to reCAPTCHA functionality within your components. This hook simplifies the integration of reCAPTCHA, allowing you to manage verification states and callbacks more easily.

```javascript
const { executeRecaptcha } = useGoogleReCaptcha();
```

--------------------------------

### Customize reCAPTCHA Badge in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/guides/theme

Customize the position and size of the reCAPTCHA badge for v3 and v2 invisible reCAPTCHA types in React. This allows developers to control the badge's placement (e.g., bottomright, bottomleft, inline) and size (normal, compact) while adhering to Google's terms of service. The 'explicit' prop within the provider configuration is used.

```jsx
<GoogleReCaptchaProvider
  type='v3 | v2-invisible'
  siteKey='your_site_key'
  explicit={{
    badge: 'bottomright | bottomleft | inline',
    size: 'normal | compact'
  }}
>
  {children}
</GoogleReCaptchaProvider>
```

--------------------------------

### GoogleReCaptchaProvider Component

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The Provider component for Google reCAPTCHA integration in React applications. It wraps your application or a part of it to provide reCAPTCHA functionality.

```APIDOC
## GoogleReCaptchaProvider Component

### Description
Provider component for Google reCAPTCHA integration in React applications. Wraps children components to provide reCAPTCHA context and functionality.

### Method
Provider

### Endpoint
N/A (Component Usage)

### Parameters
#### Common Props
- **type** (string) - Required - The type of reCAPTCHA to use: `'v2-checkbox'`, `'v2-invisible'`, or `'v3'`.
- **siteKey** (string) - Required - Your Google reCAPTCHA site key.
- **language** (string) - Optional - Language code for the reCAPTCHA widget.
- **scriptProps** (GoogleReCaptcha.Script) - Optional - Additional properties for the reCAPTCHA script.
- **isEnterprise** (boolean) - Optional - Whether to use reCAPTCHA Enterprise. Defaults to `false`.
- **host** (string) - Optional - Custom host for the reCAPTCHA script.
- **theme** (string) - Optional - Theme of the reCAPTCHA widget: `'light'` or `'dark'`. Defaults to `'light'`.
- **onLoad** (function) - Optional - Callback function when reCAPTCHA is loaded. Receives the `ReCaptchaInstance`.
- **onError** (function) - Optional - Callback function when an error occurs.

#### v3 Props (when type is 'v3')
- **explicit.badge** (string) - Optional - Position of the reCAPTCHA badge: `'bottomright'`, `'bottomleft'`, or `'inline'`.
- **explicit.tabIndex** (number) - Optional - Tab index for the reCAPTCHA widget.
- **explicit.callback** (function) - Optional - Callback when verification is successful. Receives the verification token.
- **explicit.errorCallback** (function) - Optional - Callback when reCAPTCHA encounters an error.
- **explicit.expiredCallback** (function) - Optional - Callback when the reCAPTCHA response expires.

#### v2 Checkbox Props (when type is 'v2-checkbox')
- **explicit.container** (string) - Required - Container ID for the reCAPTCHA widget.
- **explicit.action** (string) - Optional - Action name for the reCAPTCHA.
- **explicit.size** (string) - Optional - Size of the reCAPTCHA widget: `'normal'` or `'compact'`.
- **explicit.tabIndex** (number) - Optional - Tab index for the reCAPTCHA widget.
- **explicit.callback** (function) - Optional - Callback when verification is successful. Receives the verification token.
- **explicit.errorCallback** (function) - Optional - Callback when reCAPTCHA encounters an error.
- **explicit.expiredCallback** (function) - Optional - Callback when the reCAPTCHA response expires.

#### v2 Invisible Props (when type is 'v2-invisible')
- **explicit.badge** (string) - Optional - Position of the reCAPTCHA badge: `'bottomright'`, `'bottomleft'`, or `'inline'`.
- **explicit.tabIndex** (number) - Optional - Tab index for the reCAPTCHA widget.
- **explicit.callback** (function) - Optional - Callback when verification is successful. Receives the verification token.
- **explicit.errorCallback** (function) - Optional - Callback when reCAPTCHA encounters an error.
- **explicit.expiredCallback** (function) - Optional - Callback when the reCAPTCHA response expires.

### Request Example
```jsx
<GoogleReCaptchaProvider
  type="v3"
  siteKey="YOUR_RECAPTCHA_SITE_KEY"
  language="en"
  onLoad={handleLoad} 
>
  {/* Your application components */}
</GoogleReCaptchaProvider>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Usage of Google reCAPTCHA v2 Checkbox in React

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/versions/v2-checkbox

Implements the Google reCAPTCHA v2 checkbox component. It analyzes user behavior to distinguish humans from bots and may present challenges for suspicious activity. The `onChange` prop receives the generated token.

```javascript
import React from 'react';
import { GoogleReCaptchaCheckbox } from '@google-recaptcha/react';

const App = () => <GoogleReCaptchaCheckbox onChange={(token) => console.log(token)} />;
```

--------------------------------

### Resetting reCAPTCHA Widget State (React Context)

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/references/GoogleReCaptchaProvider

The `reset` function from the reCAPTCHA context is used to reset the state of the reCAPTCHA widget. This is often necessary after a form submission or when the user needs to re-authenticate. Call this function to clear any previous responses and prepare the widget for a new interaction.

```javascript
const { reset } = useGoogleReCaptcha();

// To reset the widget:
reset();
```

--------------------------------

### Hide reCAPTCHA Badge using CSS

Source: https://siberiacancode.github.io/google-recaptcha/docs/react/guides/hide-badge

This CSS snippet hides the Google reCAPTCHA badge. It uses the `!important` flag to ensure the style overrides any default styles. This method is compliant with Google's terms of service as long as the reCAPTCHA branding and privacy policy are displayed elsewhere.

```css
.grecaptcha-badge {
  display: none !important;
}
```
Tokens:
Raw