React hook for Google reCAPTCHA v2.

reCAPTCHA protects you against spam and other types of automated abuse. Here, we explain how to add reCAPTCHA to your React APP.

---

React hook for Google reCAPTCHA v2.

To get sitekey you need Register a new site

---

---

Example Checkbox reCAPTCHA

import React from 'react';
import useCaptcha from 'usecaptcha';

const sitekey = 'YOUR_SITE_KEY'; 

const App = () => {
    const [captchaRef, execute, response] = useCaptcha(sitekey);
  
    return (
      <main>
        <h1>reCAPTCHA</h1>
        <p>Response: {response}</p>
        <button onClick={execute}>EXECUTE CAPTCHA</button>
    
        <aside ref={captchaRef}/>
      </main>
    )
}

---

---

Example Invisible reCAPTCHA

import React from 'react';
import useCaptcha from 'usecaptcha';

const sitekey = 'YOUR_SITE_KEY'; 

const App = () => {
    const options = {
      size: 'invisible',
    }; 
    const [captchaRef, execute, response] = useCaptcha(sitekey, options);
    
    return (
      <main>
        <h1>reCAPTCHA</h1>
        <p>Response: {response}</p>
        <button onClick={execute}>EXECUTE CAPTCHA</button>
    
        <aside ref={captchaRef}/>
      </main>
    )
}

---

---

Example with options:

import React from 'react';
import useCaptcha from 'usecaptcha';

const sitekey = 'YOUR_SITE_KEY'; 

const App = () => {
    const options = {
      size: 'size',
      theme: 'dark',
      callback: (response) => console.log(response),
    }; 
    const [captchaRef, execute, response] = useCaptcha(sitekey, options);
    
    return (
      <main>
        <h1>reCAPTCHA</h1>
        <p>Response: {response}</p>
        <button onClick={execute}>EXECUTE CAPTCHA</button>
    
        <aside ref={captchaRef}/>
      </main>
    )
}

---

DEMO

---

---

options

Name	Value	Description
badge	[bottomright,bottomleft,inline]	Optional for invisible reCAPTCHA. Reposition the reCAPTCHA badge. 'inline' lets you position it with CSS.
theme	[dark,light]	Optional. The color theme of the widget.
size	[invisible,compact ,normal]	Optional. Used to create an invisible widget bound to a div and programmatically executed, or the size of the reCAPTCHA checkbox.
language	[Language Codes]	Optional. Forces the widget to render in a specific language. Auto-detects the user's language if unspecified. See language codes
callback	[function]	Optional. The callback function, executed when the user submits a successful response. The response token is passed to your callback.
expiredCallback	[function]	Optional. The callback function, executed when the reCAPTCHA response expires and the user needs to re-verify.
errorCallback	[function]	Optional. The callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
globally	[boolean]	Optional. Can I use reCAPTCHA globally?. If set to true will be use www.recaptcha.net host. Default to www.google.com.

---

---

Server Side Validation

Verifying response

---

---