hyperapp-google-invisible-recaptcha

2.0.3 • Public • Published

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, or inline. 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.

Package Sidebar

Install

npm i hyperapp-google-invisible-recaptcha

Weekly Downloads

2

Version

2.0.3

License

MIT

Unpacked Size

13.5 kB

Total Files

16

Last publish

Collaborators

  • albertalises