react-google-recaptcha

What is react-google-recaptcha?

The react-google-recaptcha package is a React component wrapper for Google reCAPTCHA, which helps protect websites from spam and abuse by using advanced risk analysis techniques to differentiate between humans and bots.

What are react-google-recaptcha's main functionalities?

Basic reCAPTCHA Integration

This code demonstrates how to integrate Google reCAPTCHA into a React form. The `ReCAPTCHA` component is used to render the reCAPTCHA widget, and the `handleCaptchaChange` function is called whenever the reCAPTCHA value changes.

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

function MyForm() {
  const handleCaptchaChange = (value) => {
    console.log('Captcha value:', value);
  };

  return (
    <form>
      <ReCAPTCHA
        sitekey="your-site-key"
        onChange={handleCaptchaChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Invisible reCAPTCHA

This code demonstrates how to use the invisible reCAPTCHA. The `ReCAPTCHA` component is set to `size="invisible"`, and the reCAPTCHA is executed programmatically when the form is submitted.

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

function MyForm() {
  const recaptchaRef = React.createRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    recaptchaRef.current.execute();
  };

  const handleCaptchaChange = (value) => {
    console.log('Captcha value:', value);
    // Proceed with form submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="your-site-key"
        size="invisible"
        onChange={handleCaptchaChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

reCAPTCHA v3

This code demonstrates how to use reCAPTCHA v3, which does not require user interaction. The `ReCAPTCHA` component is set to `size="invisible"` and an `action` is specified. The reCAPTCHA token is generated and can be verified on the server.

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

function MyForm() {
  const recaptchaRef = React.createRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    recaptchaRef.current.execute();
  };

  const handleCaptchaChange = (token) => {
    console.log('Captcha token:', token);
    // Verify token with your server
  };

  return (
    <form onSubmit={handleSubmit}>
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="your-site-key"
        size="invisible"
        onChange={handleCaptchaChange}
        action="submit"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Other packages similar to react-google-recaptcha

react-recaptcha

The react-recaptcha package is another React component for Google reCAPTCHA. It provides similar functionality to react-google-recaptcha but with a slightly different API. It supports both reCAPTCHA v2 and v3, and offers a straightforward way to integrate reCAPTCHA into React applications.

react-recaptcha-v3

The react-recaptcha-v3 package is specifically designed for Google reCAPTCHA v3. It provides a simple and efficient way to integrate reCAPTCHA v3 into React applications, focusing on the invisible reCAPTCHA and token generation for server-side verification.

README

react-google-recaptcha

Component wrapper for Google reCAPTCHA

Installation

npm install --save react-google-recaptcha

Usage

All you need to do is sign up for an API key pair. You will need the client key.

You can then use the reCAPTCHA. The default require, imports a wrapped component that loads the reCAPTCHA script asynchronously.

var React = require("react");
var ReCATPCHA = require("react-google-recaptcha");

function onChange(value) {
  console.log("Captcha value:", value);
}

React.render(
<ReCATPCHA
  refs="recaptcha"
  sitekey="Your client site key"
  onChange={onChange}
/>, document.body);

Rendering Props

Other properties can be used to customised the rendering.

Name	Type	Description
sitekey	string	The API client key
onChange	func	The function to be called when the user completes successfully the captcha
theme	enum	optional light or dark The them of the widget (defaults: light)
type	enum	optional image or audio The type of initial captcha (defaults: image)
tabindex	number	optional The tabindex on the element (default: 0)
onExpired	func	optional callback when the challenge is expired and has to be redone by user. By default it will call the onChange with null to signify expired callback.

Component API

The component also has some utility functions that can be called.

• getValue() returns the value of the captcha field
• reset() forces reset. See the JavaScript API doc

Advanced usage

You can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself.

var React = require("react");
var ReCATPCHA = require("react-google-recaptcha/lib/recaptcha");

var grecaptchaObject = grecaptcha // You must provide access to the google grecaptcha object.

function onChange(value) {
  console.log("Captcha value:", value);
}

React.render(
<ReCATPCHA
  refs="recaptcha"
  sitekey="Your client site key"
  onChange={onChange}
  grecaptcha={grecaptchaObject}
/>, document.body);

To Come Soon

• tests
• examples
• code coverage

The build is highly inspired by react-bootstrap

Changelog

0.3.0

• Can now uses the recaptcha functions getValue reset directly from Wrapper without getComponent first.
• bump deps