tomliangg

react-hook-recaptcha

  "description": "React hook for google-recaptcha v2",

    "dev": "rollup -c rollup.config.dev.js -w",

    "build": "rollup -c rollup.config.prod.js",

    "pretty": "prettier 'src/**/*.{js,jsx,json,css,scss}' --write"

    "url": "git+https://github.com/tomliangg/react-hook-recaptcha.git"

    "url": "https://github.com/tomliangg/react-hook-recaptcha/issues"

  "homepage": "https://github.com/tomliangg/react-hook-recaptcha#readme",

    "@rollup/plugin-node-resolve": "11.2.0",

    "@testing-library/user-event": "12.7.3",

    "rollup-plugin-peer-deps-external": "2.2.4",

> React hook for [google-recaptcha v2](https://developers.google.com/recaptcha/docs/display)

A tiny hook with less than 1KB bundle size (after minified + gzipped) as per https://bundlephobia.com/result?p=react-hook-recaptcha

## useRecaptcha hook parameters explanation

 * @param {Object} config configuration of recaptcha

 * @param {string} config.containerId  ID of the container to render the recaptcha widget

 * @param {string} config.sitekey client-side sitekey

 * @param {string} config.size the size of the widget. Value can be either of "normal", "compact", "invisible"

 * @param {string} config.theme The color theme of the widget. Value can be either of "dark" or "light". This is only applicable to checkbox recaptcha

 * @param {string} config.badge Reposition the recaptcha badge. Value can be either of "bottomright", "bottomleft", 'inline'. 'inline' lets you position it with CSS. This is only applicable to invisible recaptcha

 * @param {Function} config.successCallback executed when the user submits a successful response and passes the challenge if it prompts up. The g-recaptcha-response token is passed to the callback.

 * @param {Function} config.expiredCallback executed when the recaptcha response expires and the user needs to re-verify.

 * @param {Function} config.errorCallback 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.

### Example 1 - Checkbox/display reCAPTCHA

![checkbox recaptcha demo](https://github.com/tomliangg/react-hook-recaptcha/blob/main/demo/checkbox_recaptcha.gif)

import { useRecaptcha } from "react-hook-recaptcha";

const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI";  // change to your sitekey

const containerId = "test-recaptcha";  // this id can be customized

export default function CheckboxCaptcha() {

  const [captchaResponse, setCaptchaResponse] = useState(null);

  const successCallback = (response) => {

  const expiredCallback = () => setCaptchaResponse(null);

    const inputNameValue = document.querySelector("#name").value;

      `Hello ${inputNameValue} \n Recaptcha Response is: ${captchaResponse}`

      <h3>Enter a name and hit submit</h3>

      <p>This form is protected by Invisible Recaptcha</p>

Codesandbox demo: https://codesandbox.io/s/userecaptcha-example-checkbox-ogppw?file=/src/App.js

### Example 2 - Invisible reCAPTCHA - Programmatically invoke the challenge

![invisible recaptcha demo](https://github.com/tomliangg/react-hook-recaptcha/blob/main/demo/invisible_recaptcha.gif)

It's more versatile to programmatically invoke the challenge. This way, you can control the flow of resetting and excuting recaptcha. This example works well with form that requires validation. Whenever a form fails the validation, you can reset the recaptcha and get a new response in the new submit.

const sitekey = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"; // change to your site key

const containerId = "test-recaptcha"; // this id can be customized

export default function InvisibleCaptcha() {

    alert(`Hello ${inputNameValue} \n Recaptcha Response is: ${response}`);

  const { recaptchaLoaded, recaptchaWidget } = useRecaptcha({

		{
		"name": "react-hook-recaptcha",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "React hook for google-recaptcha v2",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

		@@ -5,2 +5,4 @@ # react-hook-recaptcha

		A tiny hook with less than 1KB bundle size (after minified + gzipped) as per https://bundlephobia.com/result?p=react-hook-recaptcha

		## Install
		@@ -7,0 +9,0 @@

Improved metrics