Component wrapper for Google reCAPTCHA
npm install --save react-google-recaptcha
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);
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. |
The component also has some utility functions that can be called.
getValue()
returns the value of the captcha fieldreset()
forces reset. See the JavaScript API doc
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);
- tests
- examples
- code coverage
The build is highly inspired by react-bootstrap