Skip to content

wojtekmaj/react-recaptcha-v3

Repository files navigation

npm downloads CI

@wojtekmaj/react-recaptcha-v3

Integrate Google reCAPTCHA v3 with your React app.

tl;dr

  • Install by executing npm install @wojtekmaj/react-recaptcha-v3 or yarn add @wojtekmaj/react-recaptcha-v3.
  • Import by adding import { ReCaptchaProvider, ReCaptcha } from '@wojtekmaj/react-recaptcha-v3'.
  • Use by wrapping your app in <ReCaptchaProvider reCaptchaKey="…">, then using <ReCaptcha /> component. Use onVerify prop to get the token.

Getting started

Obtain reCAPTCHA key

To use Google reCAPTCHA v3, you need to obtain a site key from the Google reCAPTCHA admin console. Visit Google reCAPTCHA to get your site key.

Installation

Add @wojtekmaj/react-recaptcha-v3 to your project by executing npm install @wojtekmaj/react-recaptcha-v3 or yarn add @wojtekmaj/react-recaptcha-v3.

Usage

Here's an example of basic usage:

import { useState } from 'react';
import { ReCaptchaProvider, ReCaptcha } from '@wojtekmaj/react-recaptcha-v3';

export default function Sample() {
  const [token, setToken] = useState('');

  return (
    <div className="Sample">
      <header>
        <h1>@wojtekmaj/react-recaptcha-v3 sample page</h1>
      </header>
      <div className="Sample__container">
        <main className="Sample__container__content">
          <ReCaptchaProvider reCaptchaKey="YOUR_SITE_KEY">
            <form>
              <ReCaptcha onVerify={setToken} />
              <input type="hidden" name="g-recaptcha-response" value={token} />
              <div>
                <label htmlFor="input">Input</label>
                <input id="input" type="text" />
              </div>
              <button type="submit">Submit</button>
            </form>
          </ReCaptchaProvider>
        </main>
      </div>
    </div>
  );
}

User guide

ReCaptchaProvider

Alternative export name: GoogleReCaptchaProvider.

Provides the reCAPTCHA context to your application. It should wrap your entire application or the part of your application where you want to use reCAPTCHA.

You may have multiple ReCaptchaProvider components in your application, however, they must use the same settings.

Props

Prop name Description Default value Example
container Configuration for the reCAPTCHA container. n/a { element: 'recaptcha', parameters: { badge: 'inline' } }
children The child components that will have access to the reCAPTCHA context. n/a <YourComponent />
language The language code for the reCAPTCHA widget. n/a "en"
reCaptchaKey The reCAPTCHA site key. n/a "YOUR_SITE_KEY"
scriptProps Additional props for the reCAPTCHA script. n/a { async: true, defer: true }
useEnterprise Whether to use the reCAPTCHA Enterprise. false true
useRecaptchaNet Whether to use recaptcha.net instead of google.com for loading the script. false true

ReCaptcha

Alternative export name: GoogleReCaptcha.

Initializes the reCAPTCHA verification process.

Props

Prop name Description Default value Example
action The action name for the reCAPTCHA verification. n/a "homepage"
onVerify Callback function to handle the token after verification. n/a (token) => console.log(token)
refreshReCaptcha A value to trigger reCAPTCHA verification again. n/a 7

useReCaptcha

Alternative export name: useGoogleReCaptcha.

Used to get the Google reCAPTCHA v3 context.

Returns

  • container - The container element for the reCAPTCHA widget if applicable.
  • executeRecaptcha - A function to execute the reCAPTCHA verification process.
  • reCaptchaInstance - The reCAPTCHA instance.

react-google-recaptcha-v3 vs @wojtekmaj/react-recaptcha-v3

@wojtekmaj/react-recaptcha-v3 is a complete rewrite of react-google-recaptcha-v3. It was created to enhance TypeScript support and fix some long-standing issues (handling of multiple instances, nonce support, hiding reCAPTCHA badge, etc.).

@wojtekmaj/react-recaptcha-v3 is meant to be a drop-in replacement for react-google-recaptcha-v3, so you can use it without any changes to your code, unless you rely on withGoogleReCaptcha HOC which has already been deprecated in the original package.

License

The MIT License.

Author

Wojciech Maj Wojciech Maj

Thank you

This project wouldn't be possible without the awesome work of Duong Tran who created its original version. Thank you!

About

Integrate Google reCAPTCHA v3 with your React app

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published