{"id":15011762,"url":"https://github.com/hcaptcha/vanilla-hcaptcha","last_synced_at":"2025-10-30T23:48:33.390Z","repository":{"id":232891115,"uuid":"785157767","full_name":"hCaptcha/vanilla-hcaptcha","owner":"hCaptcha","description":"A Vanilla Web Component wrapper for hCaptcha. Allows for easy integration with hCaptcha in many modern web frameworks.","archived":false,"fork":false,"pushed_at":"2025-10-14T12:47:26.000Z","size":270,"stargazers_count":10,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-14T12:53:55.626Z","etag":null,"topics":["angular","angular2","angular3","angularjs","preact","preactjs","react","reactjs","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hCaptcha.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-11T10:08:06.000Z","updated_at":"2025-10-14T12:47:29.000Z","dependencies_parsed_at":"2024-04-22T08:59:26.997Z","dependency_job_id":"00b2d015-8aa2-466b-b648-02e3e8bcd7db","html_url":"https://github.com/hCaptcha/vanilla-hcaptcha","commit_stats":{"total_commits":37,"total_committers":3,"mean_commits":"12.333333333333334","dds":0.3513513513513513,"last_synced_commit":"c565acb65dc4a3091276090bc409c9580f9bd793"},"previous_names":["hcaptcha/vanilla-hcaptcha"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hCaptcha/vanilla-hcaptcha","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hCaptcha%2Fvanilla-hcaptcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hCaptcha%2Fvanilla-hcaptcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hCaptcha%2Fvanilla-hcaptcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hCaptcha%2Fvanilla-hcaptcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hCaptcha","download_url":"https://codeload.github.com/hCaptcha/vanilla-hcaptcha/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hCaptcha%2Fvanilla-hcaptcha/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281902521,"owners_count":26581164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-30T02:00:06.501Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular3","angularjs","preact","preactjs","react","reactjs","vue","vue3","vuejs"],"created_at":"2024-09-24T19:41:36.998Z","updated_at":"2025-10-30T23:48:33.384Z","avatar_url":"https://github.com/hCaptcha.png","language":"TypeScript","readme":"# hCaptcha - Vanilla Web Component\nA Vanilla Web Component wrapper for [hCaptcha](https://docs.hcaptcha.com/).\nIt allows for easy integration with hCaptcha in many modern web frameworks.\n\n\u003cimg width=\"300px\" src=\"./assets/logo.svg\" alt=\"hCaptcha logo\" title=\"hCaptcha logo\" /\u003e\n\n**0** dependencies. **\u003c1kb** gzipped. Integrates well with Vue.JS, React, Preact, Angular, etc.\n\n[Install](#install)\n| [Browser Compatibility](#browser-compatibility)\n| [Usage](#usage)\n| [Attributes](#attributes)\n| [Events](#events)\n| [Methods](#methods)\n\n## Install\n\nUse your favorite package manager:\n```bash\nyarn add @hcaptcha/vanilla-hcaptcha\n```\n\n```bash\npnpm add @hcaptcha/vanilla-hcaptcha\n```\n\n```bash\nnpm install @hcaptcha/vanilla-hcaptcha\n```\n\nOr via cdn:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@hcaptcha/vanilla-hcaptcha\"\u003e\u003c/script\u003e\n```\n\n## Browser Compatibility\n\nhCaptcha web component is using es6 syntax and window property [customElements](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements).\n\n| Browser         | Min Version |\n|-----------------|-------------|\n| Chrome          | 54          |\n| Edge            | 79          |\n| Firefox         | 63          |\n| Opera           | 41          |\n| Safari          | 10.1        |\n| Chrome Android  | 54          |\n| Firefox Android | 63          |\n\n## Usage\n\nBeing a vanilla web component, it is relatively [easy](https://custom-elements-everywhere.com) to integrate in\nmainstream web frameworks such as: React, Preact, Vue.js, Angular, Stencil.js, etc. See below some examples.\n\n* [Vue.JS](#vuejs)\n* [React](#reactjs-and-preact)\n* [Preact](#reactjs-and-preact)\n* [Angular 2+](#angular)\n* [Angular.JS](#angularjs)\n* [Next.JS](#nextjs)\n* [Vanilla](#vanillajs)\n* You can find more examples in the `\u003croot\u003e/examples/cdn` directory.\n\n### Vue.JS\n\n\u003e Example: display invisible hCaptcha and render programmatically.\n\n1. Import once in application (`main.js`). Ignore the custom element.\n    ```js\n    import \"@hcaptcha/vanilla-hcaptcha\";\n\n    Vue.config.ignoredElements = [\n      \"h-captcha\"\n    ];\n    ```\n2. Add handling methods\n    ```js\n    methods: {\n        onError(e) {\n          console.log('hCaptcha error: ', e);\n        },\n        onCaptchaVerified(e) {\n          console.log(\"Captcha is verified\", { token: e.token, eKey: e.eKey });\n        }\n    }\n    ```\n\n3. Integrate in your vue component\n    ```html\n    \u003ctemplate\u003e\n        ...\n        \u003ch-captcha site-key=\"781559eb-513a-4bae-8d29-d4af340e3624\"\n                   size=\"invisible\"\n                   @error=\"onError\"\n                   @verified=\"onCaptchaVerified\"\u003e\u003c/h-captcha\u003e\n        ...\n    \u003c/template\u003e\n    ```\n\n### React.JS and Preact\n\n\u003e Example: display normal size hCaptcha with dark theme.\n\n1. Import once in application (`index.js`).\n    ```js\n    import '@hcaptcha/vanilla-hcaptcha';\n    ```\n\n2. Add event handler after mount\n   ```js\n   componentDidMount() {\n       const signupCaptcha = document.getElementById('signupCaptcha');\n       signupCaptcha.addEventListener('verified', (e) =\u003e {\n         console.log('verified event', { token: e.token });\n       });\n   }\n   ```\n\n3. Integrate in your html template\n   ```html\n    \u003ch-captcha id=\"signupCaptcha\"\n               site-key=\"781559eb-513a-4bae-8d29-d4af340e3624\"\n               size=\"normal\"\n               theme=\"dark\"\u003e\u003c/h-captcha\u003e\n   ```\n\n### Angular\n\n\u003e Example: display default hCaptcha.\n\n1. Import once in application (`main.ts`).\n    ```js\n    import '@hcaptcha/vanilla-hcaptcha';\n    ```\n2. Add [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) to `@NgModule.schemas`\n\n3. Integrate in your html template\n   ```html\n    \u003ch-captcha [attr.site-key]=\"siteKey\"\n               (verified)=\"onCaptchaVerified($event)\"\u003e\u003c/h-captcha\u003e\n   ```\n\n### Angular.JS\n\n\u003e Example: display compact hCaptcha with dark theme.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml ng-app=\"angularjsApp\"\u003e\n\u003chead\u003e\n    \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@hcaptcha/vanilla-hcaptcha\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n        angular.module('angularjsApp', [])\n                .controller('ExampleController', function () {\n                    this.siteKey = \"781559eb-513a-4bae-8d29-d4af340e3624\";\n                    this.onCaptchaVerified = function (e) {\n                        console.log('verified event', {token: e.token});\n                    };\n                    this.onCaptchaError = function (e) {\n                        console.log('error event', {error: e.error});\n                    };\n                });\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv ng-controller=\"ExampleController as ctrl\"\u003e\n    \u003ch-captcha site-key=\"{{ctrl.siteKey}}\"\n               size=\"compact\"\n               theme=\"dark\"\n               ng-on-verified=\"ctrl.onCaptchaVerified($event)\"\n               ng-on-error=\"ctrl.onCaptchaError($event)\"\n    \u003e\u003c/h-captcha\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Next.JS\n\n\u003e Example: display normal size hCaptcha with dark theme.\n\n1. Add `h-captcha` web component type by extending `JSX.IntrinsicElements` in `*.d.ts`.\n    ```ts\n    import * as React from 'react';\n\n    declare global {\n      declare namespace JSX {\n        interface IntrinsicElements {\n          'h-captcha': React.DetailedHTMLProps\u003cReact.HTMLAttributes\u003cHTMLElement\u003e \u0026 {\n            [k: string]: unknown;\n          }, HTMLElement\u003e;\n        }\n      }\n    }\n    ```\n\n2. Integrate in your next.js page.\n   ```js\n    export default function HomeComponent() {\n      const sitekey = '781559eb-513a-4bae-8d29-d4af340e3624';\n      const captchaRef = createRef\u003cHTMLElement\u003e();\n\n      useEffect(() =\u003e {\n        import('@hcaptcha/vanilla-hcaptcha');\n\n        if (captchaRef.current) {\n          captchaRef.current.addEventListener('verified', (e: Event) =\u003e {\n            console.log('hCaptcha event: verified', { token: e.token });\n          });\n        }\n      }, []);\n\n      return (\n      \u003cmain\u003e\n        \u003ch-captcha\n            ref={captchaRef}\n            sitekey={sitekey}\n            size=\"normal\"\n            theme=\"dark\"\n        \u003e\u003c/h-captcha\u003e\n      \u003c/main\u003e\n      );\n    }\n   ```\n\n### Vanilla.JS\n\n\u003e Example: display normal size hCaptcha accessible by keyboard (see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)).\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@hcaptcha/vanilla-hcaptcha\"\u003e\u003c/script\u003e\n\n\u003ch-captcha id=\"signupCaptcha\"\n           site-key=\"781559eb-513a-4bae-8d29-d4af340e3624\"\n           size=\"normal\"\n           tabindex=\"0\"\u003e\u003c/h-captcha\u003e\n\n\u003cscript\u003e\n    const signupCaptcha = document.getElementById('signupCaptcha');\n\n    signupCaptcha.addEventListener('verified', (e) =\u003e {\n        console.log('verified event', {token: e.token});\n    });\n    signupCaptcha.addEventListener('error', (e) =\u003e {\n        console.log('error event', {error: e.error});\n    });\n\u003c/script\u003e\n```\n\n## Attributes\n\nThe web component allows specifying attributes. These are split into two categories: render and api attributes.\n\n### Render Attributes\n\nConveniently you can set the render properties as attributes to the web component.\nIf you would like to programmatically call the `render()` method, you can set `auto-render=\"false\"` property.\n\n| Attribute             | Values/Type                         | Default  | Description                                                                                                                               |\n|-----------------------|-------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| `auto-render`         | Boolean                             | `true`   | When \"false\" it prevents automatic rendering of the checkbox.                                                                             |\n| `sitekey` (required)  | String                              | -        | Your sitekey. Please visit [hCaptcha](https://www.hcaptcha.com) and sign up to get a sitekey.                                             |\n| `size`                | String (normal, compact, invisible) | `normal` | This specifies the \"size\" of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal. |\n| `theme`               | String (light, dark)                | `light`  | hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light.                                         |\n| `tabindex`            | Integer                             | `0`      | Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.                         |\n| `hl`                  | String (ISO 639-1 code)             | -        | hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.                                  |\n| `challenge-container` | String                              | -        | A custom element ID to render the hCaptcha challenge.                                                                                     |\n| `rqdata`              | String                              | -        | See Enterprise docs.                                                                                                                      |\n\n### API Attributes\n\nThese attributes are optional.\n\n| Attribute         | Values/Type                | Default | Description                                                                                                        |\n|-------------------|----------------------------|---------|--------------------------------------------------------------------------------------------------------------------|\n| `recaptchacompat` | Boolean                    | `true`  | Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into window.grecaptcha.  |\n| `hl`              | String (ISO 639-1 code)    | -       | hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.           |\n| `jsapi`           | String                     | -       | See Enterprise docs.                                                                                               |\n| `endpoint`        | String                     | -       | See Enterprise docs.                                                                                               |\n| `reportapi`       | String                     | -       | See Enterprise docs.                                                                                               |\n| `assethost`       | String                     | -       | See Enterprise docs.                                                                                               |\n| `imghost`         | String                     | -       | See Enterprise docs.                                                                                               |\n| `sentry`          | Boolean                    | -       | See Enterprise docs.                                                                                               |\n\n\n## Events\n\nDepending on the use case, you can or not listen to the following events.\n\n| Event                | Params         | Description                                                               |\n|----------------------|----------------|---------------------------------------------------------------------------|\n| `error`              | `err`          | When an error occurs. Component will reset immediately after an error.    |\n| `verified`           | `token, eKey`  | When challenge is completed. The `token` and the `eKey` are passed along. |\n| `expired`            | -              | When the current token expires.                                           |\n| `challenge-expired`  | -              | When the unfinished challenge expires.                                    |\n| `opened`             | -              | When the challenge is opened.                                             |\n| `closed`             | -              | When the challenge is closed.                                             |\n\n## Methods\n\nThe following methods allow for programmatic control, necessary only in case of a custom hCaptcha verification flow.\n\n| Method           | Description                                                                                                              |\n|------------------|--------------------------------------------------------------------------------------------------------------------------|\n| `render(config)` | Renders the checkbox. Must pass the full render config, no attributes are injected.                                      |\n| `execute()`      | Triggers a verification request.                                                                                         |\n| `executeAsync()` | Triggers a verification request and receive a Promise which resolved with the token results or throws in case of errors. |\n| `reset()`        | Resets the hCaptcha which requires user to fill captcha again.                                                           |\n\n## Commands\n\n* `pnpm build`\n  \u003e Build a production version of the component.\n\n* `pnpm dev`\n  \u003e Build dev version with hot reload.\n\n* `pnpm test`\n  \u003e Runs unit tests.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcaptcha%2Fvanilla-hcaptcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhcaptcha%2Fvanilla-hcaptcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcaptcha%2Fvanilla-hcaptcha/lists"}