preact-google-recaptcha v0.2.1
Preact Component wrapper for Google reCAPTCHA v2
Heavily inspired by React Google Recaptcha, but removed the dependencies and made Preact compatible.
Installation
npm install --save preact-google-recaptchaExample
npm startUsage
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.
import { h, Component } from 'preact';
import ReCaptcha from 'preact-google-recaptcha';
function onChange(response) {
console.log("Captcha response:", response);
}
render(
<ReCaptcha
ref="recaptcha"
sitekey="Your client site key"
onChange={onChange}
/>,
document.body
);Example app
First update your site_key in the example/index.js file and run the following command:
npm startRendering Props
Other properties can be used to customise the rendering.
| Name | Type | Description |
|---|---|---|
| sitekey | string | The API client key |
| theme | enum | optional light or dark The theme of the widget (defaults: light). See example |
| type | enum | optional image or audio The type of initial captcha (defaults: image) |
| tabindex | number | optional The tabindex on the element (default: 0) |
| stoken | string | optional set the stoken parameter, which allows the captcha to be used from different domains, see reCAPTCHA secure-token |
| size | enum | optional compact, normal or invisible. This allows you to change the size or do an invisible captcha |
| badge | enum | optional bottomright, bottomleft or inline. Positions reCAPTCHA badge. Only for invisible reCAPTCHA |
| onChange | func | optional The function to be called when the user successfully completes the captcha |
| 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. |
In order to translate the reCaptcha widget, you should create a global variable configuring the desired language. If you don't provide it, reCaptcha will pick up the user's interface language.
window.recaptchaOptions = {
lang: 'en'
}Component API
The component also has some utility functions that can be called.
getResponse()returns the value of the captcha field.execute()executes the invisible captcha, you will get the response back from theonChangecallback.reset()resets the captcha to its original state.