@google-recaptcha/react

React Google reCAPTCHA

Google reCAPTCHA is a powerful library that provides easy integration of Google reCAPTCHA into your React applications. Built with TypeScript-first approach, SSR compatibility, and tree-shaking optimization - everything you need to protect your forms and applications from spam and abuse.

Supported reCAPTCHA Versions

• V3 - Invisible protection that returns a risk score (0.0-1.0) for each request
• V2 Invisible - Background analysis without user interaction
• V2 Checkbox - Interactive "I'm not a robot" checkbox with optional challenges
• Enterprise mode - support enterprise

Documentation

Visit https://siberiacancode.github.io/google-recaptcha/docs to view the full documentation.

Getting Started

npm install @google-recaptcha/react

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>
);

Create a component to use reCAPTCHA:

   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();
       ...
     };

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