react-google-recaptcha

Component wrapper for Google reCAPTCHA

Installation

npm install --save react-google-recaptcha

Usage

First of all sign up for an API key pair. Then add the Google reCAPTCHA script tag to your html.

The property set after onload is important and will be needed at render. This props is used to define a global callback, called by the Google script once it is loaded.

See the Google reCAPTCHA docs for more info.

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback" async defer></script>

You can then use the reCAPTCHA

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

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

React.render(
<ReCATPCHA
  sitekey="Your sitekey"
  onChange={onChange}
  onloadCallbackName="onloadcallback"
/>, 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
onloadCallbackName	string	The name the script will call onload. This must be the same provided on script tag.
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)
onLoad	func	optional callback called when the widget has rendered
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

To Come Soon

• tests
• examples
• code coverage

The build is highly inspired by react-bootstrap