vanilla-hcaptcha - npm Package Compare versions

vanilla-hcaptcha

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.2 to 0.0.3

package.json

		{
		"name": "vanilla-hcaptcha",
		"description": "Vanilla Web Component for hCaptcha. 0 dependencies. <1kb gzipped.",
		"version": "0.0.2",
		"version": "0.0.3",
		"main": "dist/hcaptcha-component.min.js",
		@@ -22,11 +22,13 @@ "author": {
		"keywords": [
		"captcha",
		"hcaptcha",
		"stopbots",
		"webcomponent",
		"vanilla",
		"js",
		"web component",
		"captcha",
		"stop bots",
		"vanilla.js",
		"vue",
		"vue.js"
		"vue.js",
		"react",
		"react.js"
		]
		}

174

README.md

		# hCaptcha - Vanilla Web Component

		0 dependencies. <1kb gzipped. Integrates well with Vue.JS.
		0 dependencies. <1kb gzipped. Integrates well with Vue.JS, React, Angular, etc.

		@@ -13,73 +13,123 @@ ## Install

		## Usage Vue.JS
		## Usage

		#### main.js
		Import once in application. Ignore the custom element.
		```
		import "vanilla-hcaptcha";
		Being a vanilla web component, it is relatively [easy](https://custom-elements-everywhere.com) to integrate in mainstream web frameworks such as: React, Vue.js, Angular, Stencil.js, etc. See below some examples.

		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>
		### Vue.JS

		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 });
		1. Import once in application (`main.js`). Ignore the custom element.
		```
		import "vanilla-hcaptcha";

		Vue.config.ignoredElements = [
		"h-captcha"
		];
		```

		2. 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"
		site-key="10000000-ffff-ffff-ffff-000000000001"
		size="normal"
		dark
		tabindex="0" />
		### React.JS

		const signupCaptcha = document.getElementById('signupCaptcha');
		1. Import once in application (`index.js`).
		```
		import 'vanilla-hcaptcha';
		```

		signupCaptcha.addEventListener('loaded', () => {
		signupCaptcha.render(); // Show captcha
		});
		signupCaptcha.addEventListener('verified', (e) => {
		console.log('verified event', { key: e.key });
		});
		signupCaptcha.addEventListener('expired', () => {
		console.log('expired event');
		});
		signupCaptcha.addEventListener('error', (e) => {
		console.log('error event', { error: e.error });
		});
		```
		2. Integrate in your component
		```
		componentDidMount() {
		const signupCaptcha = document.getElementById('signupCaptcha');
		signupCaptcha.addEventListener('loaded', () => {
		signupCaptcha.render(); // Show captcha
		});
		signupCaptcha.addEventListener('verified', (e) => {
		console.log('verified event', { key: e.key });
		});
		signupCaptcha.addEventListener('expired', () => {
		console.log('expired event');
		});
		signupCaptcha.addEventListener('error', (e) => {
		console.log('error event', { error: e.error });
		});
		}

		render() {
		return (
		...
		<h-captcha id="signupCaptcha"
		site-key="10000000-ffff-ffff-ffff-000000000001"
		size="normal"
		dark
		tabindex="0"
		onLoaded="onCaptchaLoaded"
		onVerified="onCaptchaVerified"
		onExpired="onCaptchaExpired"
		onError="onCaptchaError" />
		...
		);
		}
		```


		### Vanilla.JS

		1.
		```
		<h-captcha id="signupCaptcha"
		site-key="10000000-ffff-ffff-ffff-000000000001"
		size="normal"
		dark
		tabindex="0" />

		const signupCaptcha = document.getElementById('signupCaptcha');

		signupCaptcha.addEventListener('loaded', () => {
		signupCaptcha.render(); // Show captcha
		});
		signupCaptcha.addEventListener('verified', (e) => {
		console.log('verified event', { key: e.key });
		});
		signupCaptcha.addEventListener('expired', () => {
		console.log('expired event');
		});
		signupCaptcha.addEventListener('error', (e) => {
		console.log('error event', { error: e.error });
		});
		```

		## Docs
		@@ -86,0 +136,0 @@ It loads `hcaptcha.min.js` if not already present on dom.

Improved metrics