hyperapp-google-invisible-recaptcha
A Hyperapp component that implements the Google Invisible reCAPTCHA.
Demo
Install
npm install hyperapp-google-invisible-recaptcha --save
Usage
The library consists of a component that instantiates an invisible reCAPTCHA and provides some functions for performing validation actions. The component is declared as:
import Recaptcha from 'react-google-invisible-recaptcha';
let recaptcha = null; //Stores a reference to the API functions
<Recaptcha
onInstanceCreated={instance => recaptcha = instance}
sitekey={ <sitekey> }
onResolved={ () => console.log( 'Ah, I see you are human' ) } />
Configuration
The component accepts the following props:
- sitekey: sitekey for your reCAPTCHA. Required.
- onResolved: callback function when the reCAPTCHA is resolved. Required.
Optional props that you can add to tweak the component.
- locale: the language of the reCAPTCHA. Default: en.
- badge:
bottomright
,bottomleft
, orinline
. Where the visual container is placed on the screen. Default: bottomright. - onLoaded: callback when the recaptcha is loaded. Default: noop.
APIs
The component provides functions to validate and obtain information from the reCAPTCHA. Those are:
- execute: function that invokes the reCAPTCHA check.
- reset: function which resets the reCAPTCHA widget.
- getResponse: function which returns the response token.
To access the functions you need to store a reference to the API functions via the onInstanceCreated
prop.
let recaptcha = null;
<Recaptcha onInstanceCreated={instance => recaptcha = instance} ... />
const executeCaptcha = () => {
recaptcha.execute(); //API Function
}
Usage Example
This minimal example can be found on the example folder of the project.
import { h } from 'hyperapp';
import Recaptcha from 'hyperapp-google-invisible-recaptcha';
let recaptcha = null;
const onCaptchaResolved = () => {
alert(`Captcha solved with response: ${recaptcha.getResponse()}`);
}
const executeCaptcha = () => {
recaptcha.reset();
recaptcha.execute();
}
export default ({}, {}) =>
<div>
<Recaptcha onInstanceCreated={instance => recaptcha = instance} sitekey="<sitekey>" onResolved = {_ => onCaptchaResolved()}/>
<section>
<button onclick={_ => recaptcha && executeCaptcha()}>
Validate Recaptcha
</button>
</section>
</div>;
License
hyperapp-google-invisible-recaptcha is MIT licensed. See LICENSE.