React Invisible Recaptcha

A simple React component to create Google invisible recaptchas

Install

npm install react-invisible-recaptcha --save

Or use Yarn:

yarn add react-invisible-recaptcha

Example

Below is a component which implements the recaptcha.

class Example extends React.Component {
  constructor( props ) {
    super( props );
    this.state = { value: '' };
    this.onSubmit = this.onSubmit.bind( this );
    this.onResolved = this.onResolved.bind( this );
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={ this.state.value }
          onChange={ event => this.setState( { value: event.target.value } ) } />
        <button onClick={ this.onSubmit }>Submit</button>
        <Recaptcha
          ref={ ref => this.recaptcha = ref }
          sitekey="<sitekey>"
          onResolved={ this.onResolved } />
      </div>
    );
  }
  onSubmit() {
    if ( '' == this.state.value ) {
      alert( 'Validation failed! Input cannot be empty.' );
      this.recaptcha.reset();
    } else {
      this.recaptcha.execute();
    }
  }
  onResolved() {
    alert( 'Recaptcha resolved with response: ' + this.recaptcha.getResponse() );
  }
}

Usage

import Recaptcha from 'react-google-invisible-recaptcha';
 
<Recaptcha
  ref={ ref => this.recaptcha = ref }
  sitekey={ <sitekey> }
  onResolved={ () => console.log( 'Human detected.' ) } />

Configuration

Set required props to get going.

• sitekey: sitekey for your recaptcha. Required.

A few optional props you can tweak.

• badge: bottomright, bottomleft, or inline. Default: bottomright.
• locale: in which language it speaks. Default: en.
• nonce: nonce included in the reCAPTCHA script tag. Default: undefined.
• onResolved: callback when the recaptcha is resolved. Default: noop.
• onError: callback when the recaptcha encounters an error. Default: noop.
• onExpired: callback when the recaptcha response expires. Default: noop.
• onLoaded: callback when the recaptcha is loaded. Default: noop.
• style: custom CSS applied to the root node. Default: undefined.
• tabindex: tabindex of the challenge. Default: 0.
• trustedTypesPolicy: the Trusted Types policy to use for the script url. Default: null.

APIs

<Recaptcha ref={ ref => this.recaptcha = ref } ... />

• this.recaptcha.execute function which invokes the reCAPTCHA check.
• this.recaptcha.reset function which resets the reCAPTCHA widget.
• this.recaptcha.getResponse function which returns the response token.

License

MIT. See LICENSE.md for details.