@types/react-google-recaptcha

What is @types/react-google-recaptcha?

@types/react-google-recaptcha provides TypeScript definitions for the react-google-recaptcha package, which is a React component wrapper for Google reCAPTCHA. This package allows developers to easily integrate Google reCAPTCHA into their React applications with type safety.

What are @types/react-google-recaptcha's main functionalities?

Rendering reCAPTCHA

This feature allows you to render a Google reCAPTCHA widget in your React component. You can specify the site key and handle the onChange event to capture the reCAPTCHA value.

import ReCAPTCHA from 'react-google-recaptcha';

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

  return (
    <ReCAPTCHA
      ref={recaptchaRef}
      sitekey="your-site-key"
      onChange={(value) => console.log('Captcha value:', value)}
    />
  );
}

Executing reCAPTCHA programmatically

This feature allows you to execute the reCAPTCHA programmatically, which is useful for invisible reCAPTCHA. You can call the execute method on the reCAPTCHA ref to trigger the verification process.

import ReCAPTCHA from 'react-google-recaptcha';

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

  const handleClick = () => {
    recaptchaRef.current.execute();
  };

  return (
    <div>
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="your-site-key"
        size="invisible"
        onChange={(value) => console.log('Captcha value:', value)}
      />
      <button onClick={handleClick}>Verify</button>
    </div>
  );
}

Resetting reCAPTCHA

This feature allows you to reset the reCAPTCHA widget programmatically. You can call the reset method on the reCAPTCHA ref to reset the widget and clear the current response.

import ReCAPTCHA from 'react-google-recaptcha';

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

  const handleReset = () => {
    recaptchaRef.current.reset();
  };

  return (
    <div>
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="your-site-key"
        onChange={(value) => console.log('Captcha value:', value)}
      />
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

Other packages similar to @types/react-google-recaptcha

react-recaptcha

react-recaptcha is another React component for Google reCAPTCHA. It provides similar functionality to react-google-recaptcha but does not have TypeScript definitions out of the box. It is a good alternative if you do not require TypeScript support.

react-recaptcha-v3

react-recaptcha-v3 is a React component specifically for Google reCAPTCHA v3. It provides a different approach to reCAPTCHA by scoring user interactions rather than requiring user input. This package is useful if you are looking to implement reCAPTCHA v3 in your React application.

react-google-invisible-recaptcha

react-google-invisible-recaptcha is a React component for Google Invisible reCAPTCHA. It focuses on providing an invisible reCAPTCHA solution, which can be triggered programmatically. This package is a good choice if you specifically need invisible reCAPTCHA functionality.

README

Installation

npm install --save @types/react-google-recaptcha

Summary

This package contains type definitions for react-google-recaptcha (https://github.com/dozoisch/react-google-recaptcha).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-google-recaptcha.

Additional Details

• Last updated: Tue, 23 Jan 2024 20:07:30 GMT
• Dependencies: @types/react

Credits

These definitions were written by Koala Human, Tom Sturge, Max Bo, Meir Keller, Florian Roher, Timotei Mocan, and Michael Szmadzinski.