ngx-turnstile
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

Cloudflare Turnstile Component for Angular

ngx-turnstile

An easy to use component for implementing Cloudflare Turnstile in Angular.

Installation

Add this library to your Angular project using npm or yarn.

yarn add ngx-turnstile
npm install ngx-turnstile --save

Quickstart

To start, import the TurnstileModule in your app module.

// app.module.ts
import { TurnstileModule } from "ngx-turnstile";
import { BrowserModule } from "@angular/platform-browser";
import { MyApp } from "./app.component.ts";

@NgModule({
  bootstrap: [MyApp],
  declarations: [MyApp],
  imports: [BrowserModule, TurnstileModule],
})
export class MyAppModule {}

After that, you are free to use the component anywhere:

// app.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `<ngx-turnstile [siteKey]="siteKey" (resolved)="sendCaptchaResponse($event)" theme="auto" [tabIndex]="0"></ngx-turnstile>`,
})
export class MyApp {
  sendCaptchaResponse(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }
}

API

The component supports these options as input:

  • siteKey
  • action
  • cData
  • theme
  • tabIndex

These options are well documented in the Cloudflare Docs. The letter cases are adapted to camelCase to facilitate easy migration from ng-recaptcha.

Events

  • resolved(response: string). Occurs when the CAPTCHA resolution value changed.

Example

For those who prefer examples over documentation, simply clone the repository and run

$ yarn install
$ ng build ngx-turnstile
$ ng serve ngx-turnstile-demo

Dependents (0)

Package Sidebar

Install

npm i ngx-turnstile

Weekly Downloads

1,236

Version

0.2.1

License

MIT

Unpacked Size

54.9 kB

Total Files

21

Last publish

Collaborators

  • vertohealth