react-use-recaptcha-v3

Integration Google reCaptcha with React hooks.

Google ReCaptcha V3 with React Hooks

Installation

npm install react-use-recaptcha-v3 --save

Usage

1. Get your site key for ReCaptcha V3

2. Implement Back End side

3. Use this package to send google re-captcha token to you Back End verifier

simplest way:

import React from 'react'
import { useReCaptcha } from 'react-use-recaptcha-v3';

const UncontrolledGoogleReCaptcha = () => {
  const siteKey = '[SET UP YOU SITE KEY HERE!!!]';
  const { token } = useReCaptcha(siteKey);

  return (
    <form>
      {/* other fields here */}
      {token ? <input name="g-recaptcha" value={token} /> : null}
    </form>
  );
};

recommended way:

import React, { useState } from 'react';
import { useReCaptcha } from 'react-use-recaptcha-v3';

const ControlledGoogleReCaptcha = () => {
  const [token, setToken] = useState();

  const handleToken = (tokenFromGoogleResponse) => {
    console.log('fresh token is appear here, each time actionName is changed', { tokenFromGoogleResponse });
    setToken(tokenFromGoogleResponse);
  };

  const siteKey = '[SET UP YOU SITE KEY HERE!!!]';
  const actionName = 'submit'; // you can change actionName here if you need

  useReCaptcha(siteKey, handleToken, actionName);

  return (
    <form>
      {/* other fields here */}
      {token ? <input name="g-recaptcha" value={token} /> : null}
    </form>
  );
};