react-invisible-recaptcha
v0.3.1
Published
A React component which is simply interested in Google invisible reCaptcha.
Downloads
1,013
Maintainers
Readme
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
, orinline
. 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.