Socket
Socket
Sign inDemoInstall

vanilla-hcaptcha

Package Overview
Dependencies
0
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.1 to 0.0.2

6

package.json
{
"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|

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc