vanilla-hcaptcha - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "vanilla-hcaptcha",
   "description": "Vanilla Web Component for hCaptcha. 0 dependencies. <1kb gzipped.",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/hcaptcha-component.min.js",
@@ -26,2 +26,3 @@ "author": {
     "webcomponent",
+    "client",
     "vanilla",
@@ -28,0 +29,0 @@ "vanilla.js",

README.md

@@ -1,14 +0,16 @@
-# hCaptcha - Vanilla Web Component
+# hCaptcha - Vanilla Web Component 
 
+<img width="300px" src="https://assets-global.website-files.com/5c73e7ea3f8bb2a85d2781db/5c73e7ea3f8bb23b4c278261_hcaptcha-logo-landscape.svg" alt="hCaptcha logo" title="hCaptcha logo" />  
+
 **0** dependencies. **<1kb** gzipped. Integrates well with Vue.JS, React, Angular, etc.
 
 ## Install
-```
+```bash
 yarn add vanilla-hcaptcha
 ```
-```
+```html
 <script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
 ```
 
-## Usage 
+## Usage
 
@@ -19,5 +21,6 @@ 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.JS
+> Example: display invisible hCaptcha and render programmatically.
 
 1. Import once in application (`main.js`). Ignore the custom element.
-    ```
+    ```js
     import "vanilla-hcaptcha";
@@ -29,110 +32,96 @@
     ```
-
-2. Integrate in your component
+2. Add handling methods
+    ```js
+    methods: {
+        onCaptchaLoaded(e) {
+          console.log("Captcha is loaded");
+          e.target.render(); // Show captcha programmatically
+        },
+        onCaptchaVerified(e) {
+          console.log("Captcha is verified", { key: e.key });
+        }
+    }
     ```
+   
+3. Integrate in your vue component
+    ```html
     <template>
         ...
-        <h-captcha id="signupCaptcha"
-                   site-key="10000000-ffff-ffff-ffff-000000000001"
-                   size="normal"
-                   dark
-                   tabindex="0"
+        <h-captcha site-key="10000000-ffff-ffff-ffff-000000000001"
+                   size="invisible"
                    @loaded="onCaptchaLoaded"
-                   @verified="onCaptchaVerified"
-                   @expired="onCaptchaExpired"
-                   @error="onCaptchaError" />
+                   @verified="onCaptchaVerified"></h-captcha>
+        ...
     </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 });
-            }
-        }
-    }
     ```
-    
 
 ### React.JS
+> Example: display normal size hCaptcha with dark theme.
 
 1. Import once in application (`index.js`).
-    ```
+    ```js
     import 'vanilla-hcaptcha';
     ```
 
-2. Integrate in your component
-    ```
+2. Add event handler after mount
+   ```js
    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" />
-            ...
-        );
-    }
+   ```
+
+3. Integrate in your html template
+   ```html
+    <h-captcha id="signupCaptcha"
+               site-key="10000000-ffff-ffff-ffff-000000000001"
+               size="normal"
+               dark
+               onVerified="onCaptchaVerified"></h-captcha>
+   ```
+
+### Angular
+> Example: display default hCaptcha.
+
+1. Import once in application (`main.ts`).
+    ```js
+    import 'vanilla-hcaptcha';
     ```
+2. Add [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) to `@NgModule.schemas`
+
+3. Integrate in your html template
+   ```html
+    <h-captcha [attr.site-key]="siteKey"
+               (verified)="onCaptchaVerified($event)"></h-captcha>
     
+   ```
 
+
 ### Vanilla.JS
+> Example: display normal size hCaptcha accessible by keyboard (see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)). 
 
 1. 
-    ```
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
+
     <h-captcha id="signupCaptcha"
                site-key="10000000-ffff-ffff-ffff-000000000001"
                size="normal"
-               dark
-               tabindex="0" />
+               tabindex="0"></h-captcha>
     
-    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 });
-    });
+    <script>
+        const signupCaptcha = document.getElementById('signupCaptcha');
+        
+        signupCaptcha.addEventListener('verified', (e) => {
+            console.log('verified event', { key: e.key });
+        });
+        signupCaptcha.addEventListener('error', (e) => {
+            console.log('error event', { error: e.error });
+        });
+    </script>
     ```
 
 ## Docs
-It loads `hcaptcha.min.js` if not already present on dom.
 
@@ -139,0 +128,0 @@ #### Attributes

No alert changes

Worsened metrics

Total package byte prevSize

12253

decreased by-1.7%

Number of lines in readme file

155

decreased by-6.63%

No dependency changes