A React component which is simply interested in Google invisible reCaptcha.
npm install react-invisible-recaptchaA simple React component to create Google invisible recaptchas
``sh`
npm install react-invisible-recaptcha --save
Or use Yarn:
`sh`
yarn add react-invisible-recaptcha
Below is a component which implements the recaptcha.
`js`
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 (
value={ this.state.value }
onChange={ event => this.setState( { value: event.target.value } ) } />
sitekey="
onResolved={ this.onResolved } />
);
}
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() );
}
}
`js
import Recaptcha from 'react-google-invisible-recaptcha';
sitekey={
onResolved={ () => console.log( 'Human detected.' ) } />
`
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.
`js``
* _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.
MIT. See LICENSE.md for details.