### Install next-recaptcha-v3 with npm

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Installs the next-recaptcha-v3 package using the npm package manager. This command adds the package as a project dependency.

```Shell
npm i next-recaptcha-v3
```

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

### Install next-recaptcha-v3 with pnpm

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Installs the next-recaptcha-v3 package using the pnpm package manager. This command adds the package as a project dependency.

```Shell
pnpm i next-recaptcha-v3
```

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

### Install next-recaptcha-v3 with yarn

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Installs the next-recaptcha-v3 package using the yarn package manager. This command adds the package as a project dependency.

```Shell
yarn add next-recaptcha-v3
```

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

### Configure ReCaptcha Site Key Environment Variable

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Sets the public ReCaptcha site key as a Next.js environment variable. This key is required for the ReCaptcha service to identify your site.

```Shell
NEXT_PUBLIC_RECAPTCHA_SITE_KEY="GTM-XXXXXXX"
```

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

### Wrap Application with ReCaptchaProvider

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Wraps the main application component with the ReCaptchaProvider. This component loads the ReCaptcha script and makes the ReCaptcha context available to child components. The site key can be passed directly as a prop.

```TypeScript
import { ReCaptchaProvider } from "next-recaptcha-v3";

const MyApp = ({ Component, pageProps }) => (
  <ReCaptchaProvider reCaptchaKey="[GTM-XXXXXXX]">
    <Component {...pageProps} />
  </ReCaptchaProvider>
);
```

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

### Access ReCaptcha Context with useReCaptcha Hook

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Demonstrates how to use the useReCaptcha hook to access the global grecaptcha object, the site key, and the script loading state. This hook provides necessary information for executing ReCaptcha actions.

```TypeScript
import { useReCaptcha } from "next-recaptcha-v3";

const {
  /** reCAPTCHA_site_key */
  reCaptchaKey,
  /** Global ReCaptcha object */
  grecaptcha,
  /** If `true`, ReCaptcha script has been loaded */
  isLoaded,
  /** If `true`, an error occurred while loading ReCaptcha script */
  isError,
  /** Error received while loading ReCaptcha script */
  error,
  /** Other hook props */
  ...otherProps
} = useReCaptcha();
```

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

### Configure ReCaptchaProvider for Enterprise

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Configures the ReCaptchaProvider to use ReCaptcha Enterprise. Set the useEnterprise prop to true when using the enterprise version of the service.

```TypeScript
import { ReCaptchaProvider } from "next-recaptcha-v3";

const MyApp = ({ Component, pageProps }) => (
  <ReCaptchaProvider useEnterprise>
    <Component {...pageProps} />
  </ReCaptchaProvider>
);
```

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

### Generate reCAPTCHA Token with withReCaptcha HOC in React

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Shows how to wrap a React component with the withReCaptcha higher-order component. The HOC injects isLoaded and executeRecaptcha props, allowing the component to generate a reCAPTCHA token once the library is loaded and perform actions based on the token.

```tsx
import { useEffect, useState } from "react";
import { withReCaptcha, WithReCaptchaProps } from "next-recaptcha-v3";
import { validateToken } from "./utils";

interface MyPageProps extends WithReCaptchaProps {}

const MyPage: React.FC<MyPageProps> = ({ isLoaded, executeRecaptcha }) => {
  const [token, setToken] = useState<string>(null);

  useEffect(() => {
    if (isLoaded) {
      const generateToken = async () => {
        const newToken = await executeRecaptcha("page_view");
        setToken(newToken);
      };
      generateToken();
    }
  }, [isLoaded, executeRecaptcha]);

  useEffect(() => {
    if (token) {
      // Validate token and make some actions if it's a bot
      validateToken(token);
    }
  }, [token]);

  return <h1>Hello</h1>;
};

export default withReCaptcha(MyPage);
```

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

### Generate reCAPTCHA Token with ReCaptcha Component in React

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Illustrates using the ReCaptcha component to automatically generate a token upon rendering or specific events. The generated token is passed to the onValidate callback, which can then be used to trigger server-side validation or other actions.

```tsx
import { useEffect, useState } from "react";
import { ReCaptcha } from "next-recaptcha-v3";
import { validateToken } from "./utils";

const MyPage = () => {
  const [token, setToken] = useState<string>(null);

  useEffect(() => {
    if (token) {
      // Validate token and make some actions if it's a bot
      validateToken(token);
    }
  }, [token]);

  return (
    <>
      <ReCaptcha onValidate={setToken} action="page_view" />
      <h1>Hello</h1>
    </>
  );
};
```

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

### Generate reCAPTCHA Token with useReCaptcha Hook in React

Source: https://github.com/snelsi/next-recaptcha-v3/blob/master/README.md

Demonstrates using the useReCaptcha hook to obtain the executeRecaptcha function. This function is then used within a form submission handler to generate a reCAPTCHA token with a specific action name before sending data to a server API for validation.

```tsx
import { useState, useCallback } from "react";
import { useReCaptcha } from "next-recaptcha-v3";

const MyForm = () => {
  const [name, setName] = useState("");

  // Import 'executeRecaptcha' using 'useReCaptcha' hook
  const { executeRecaptcha } = useReCaptcha();

  const handleSubmit = useCallback(
    async (e) => {
      e.preventDefault();

      // Generate ReCaptcha token
      const token = await executeRecaptcha("form_submit");

      // Attach generated token to your API requests and validate it on the server
      fetch("/api/form-submit", {
        method: "POST",
        body: {
          data: { name },
          token,
        },
      });
    },
    [executeRecaptcha, name],
  );

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.