vanilla-hcaptcha
Advanced tools
Comparing version 0.0.1 to 0.0.2
{ | ||
"name": "vanilla-hcaptcha", | ||
"description": "Vanilla Web Component for hCaptcha. 0 dependencies. <1kb gzipped.", | ||
"version": "0.0.1", | ||
"version": "0.0.2", | ||
"main": "dist/hcaptcha-component.min.js", | ||
@@ -27,4 +27,6 @@ "author": { | ||
"captcha", | ||
"stop bots" | ||
"stop bots", | ||
"vue", | ||
"vue.js" | ||
] | ||
} |
# hCaptcha - Vanilla Web Component | ||
0 dependencies. It loads `hcaptcha.min.js` if not already present on dom. | ||
**0** dependencies. **<1kb** gzipped. Integrates well with Vue.JS. | ||
@@ -10,7 +10,54 @@ ## Install | ||
``` | ||
<script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha/dist/hcaptcha-component.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script> | ||
``` | ||
## Usage | ||
## Usage Vue.JS | ||
#### main.js | ||
Import once in application. Ignore the custom element. | ||
``` | ||
import "vanilla-hcaptcha"; | ||
Vue.config.ignoredElements = [ | ||
"h-captcha" | ||
]; | ||
``` | ||
#### Integrate in your component | ||
``` | ||
<template> | ||
... | ||
<h-captcha id="signupCaptcha" | ||
site-key="10000000-ffff-ffff-ffff-000000000001" | ||
size="normal" | ||
dark | ||
tabindex="0" | ||
@loaded="onCaptchaLoaded" | ||
@verified="onCaptchaVerified" | ||
@expired="onCaptchaExpired" | ||
@error="onCaptchaError" /> | ||
</template> | ||
export default { | ||
name: ... | ||
methods: { | ||
onCaptchaLoaded(e) { | ||
console.log("Captcha is loaded"); | ||
e.target.render(); // Show captcha | ||
}, | ||
onCaptchaVerified(e) { | ||
console.log("Captcha is verified", { key: e.key }); | ||
}, | ||
onCaptchaExpired() { | ||
console.log("The verified captcha expired"); | ||
}, | ||
onCaptchaError(e) { | ||
console.log("Captcha error", { error: e.error }); | ||
} | ||
} | ||
} | ||
``` | ||
## Usage Vanilla.JS | ||
``` | ||
<h-captcha id="signupCaptcha" | ||
@@ -38,3 +85,7 @@ site-key="10000000-ffff-ffff-ffff-000000000001" | ||
## Attributes | ||
## Docs | ||
It loads `hcaptcha.min.js` if not already present on dom. | ||
#### Attributes | ||
|Attribute|Description| | ||
@@ -48,3 +99,3 @@ |---|---| | ||
## Events | ||
#### Events | ||
@@ -51,0 +102,0 @@ |Event|Data|Description| |
10698
116