@thind9xdev/react-turnstile 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 thind9xdev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,369 @@
+# React Cloudflare Turnstile
+
+A clean, modern React hook for Cloudflare Turnstile integration.
+
+## Install:
+
+```bash
+npm i @thind9xdev/react-turnstile
+```
+
+## Import to React:
+
+```tsx
+import { useTurnstile } from "@thind9xdev/react-turnstile";
+```
+
+## Basic Usage
+
+```tsx
+import React from "react";
+import { useTurnstile } from "@thind9xdev/react-turnstile";
+
+const YourComponent = () => {
+  const siteKey = "YOUR_SITE_KEY";
+  const { ref, token, error, isLoading } = useTurnstile(siteKey);
+
+  if (isLoading) {
+    return <div>Loading Turnstile...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  // You can use token to send request to API
+  return (
+    <div>
+      <div ref={ref}></div>
+      {token && <p>Turnstile token generated successfully!</p>}
+    </div>
+  );
+};
+
+export default YourComponent;
+```
+
+## Advanced Usage
+
+```tsx
+import React from "react";
+import { useTurnstile, TurnstileOptions } from "@thind9xdev/react-turnstile";
+
+const YourComponent = () => {
+  const siteKey = "YOUR_SITE_KEY";
+  const options: TurnstileOptions = {
+    theme: "light",
+    size: "normal",
+    language: "en",
+    retry: "auto",
+    "refresh-expired": "auto",
+    appearance: "always"
+  };
+  
+  const { 
+    ref,
+    token, 
+    error, 
+    isLoading, 
+    reset,
+    execute,
+    getResponse
+  } = useTurnstile(siteKey, options);
+
+  const handleSubmit = async () => {
+    try {
+      const currentToken = getResponse();
+      if (currentToken) {
+        // Send request to your API with the token
+        console.log("Current token:", currentToken);
+      } else {
+        // Execute Turnstile if no token available
+        execute();
+      }
+    } catch (err) {
+      console.error("Failed to get Turnstile token:", err);
+    }
+  };
+
+  const handleReset = () => {
+    reset();
+  };
+
+  return (
+    <div>
+      <div ref={ref}></div>
+      <button onClick={handleSubmit} disabled={isLoading}>
+        {isLoading ? "Loading..." : "Submit"}
+      </button>
+      <button onClick={handleReset} disabled={isLoading}>
+        Reset Turnstile
+      </button>
+      {error && <p style={{ color: "red" }}>Error: {error}</p>}
+      {token && <p style={{ color: "green" }}>Token ready!</p>}
+    </div>
+  );
+};
+
+export default YourComponent;
+```
+
+## Invisible/Execute Mode Usage
+
+```tsx
+import React from "react";
+import { useTurnstile, TurnstileOptions } from "@thind9xdev/react-turnstile";
+
+const InvisibleTurnstile = () => {
+  const siteKey = "YOUR_SITE_KEY";
+  const options: TurnstileOptions = {
+    appearance: "execute", // Invisible mode
+    execution: "execute"
+  };
+  
+  const { ref, token, error, isLoading, execute } = useTurnstile(siteKey, options);
+
+  const handleFormSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!token) {
+      // Execute Turnstile verification
+      execute();
+      return;
+    }
+
+    // Proceed with form submission using the token
+    console.log("Submitting with token:", token);
+  };
+
+  return (
+    <form onSubmit={handleFormSubmit}>
+      <div ref={ref}></div>
+      <input type="email" placeholder="Your email" required />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? "Verifying..." : "Submit"}
+      </button>
+      {error && <p style={{ color: "red" }}>{error}</p>}
+    </form>
+  );
+};
+
+export default InvisibleTurnstile;
+```
+
+## API Reference
+
+### `useTurnstile(siteKey, options?)`
+
+#### Parameters:
+- `siteKey` (string): Your Cloudflare Turnstile site key
+- `options` (TurnstileOptions, optional): Configuration options
+
+#### Options (TurnstileOptions):
+- `theme` ('light' | 'dark' | 'auto', optional): Widget theme (default: 'auto')
+- `size` ('normal' | 'compact', optional): Widget size (default: 'normal')
+- `language` (string, optional): Language code (default: 'auto')
+- `retry` ('auto' | 'never', optional): Retry behavior (default: 'auto')
+- `retry-interval` (number, optional): Retry interval in milliseconds
+- `refresh-expired` ('auto' | 'manual' | 'never', optional): Token refresh behavior (default: 'auto')
+- `appearance` ('always' | 'execute' | 'interaction-only', optional): When to show the widget (default: 'always')
+- `execution` ('render' | 'execute', optional): Execution mode (default: 'render')
+
+#### Returns:
+- `ref` (React.RefObject): Ref to attach to the container div element
+- `token` (string | null): The Turnstile token
+- `error` (string | null): Error message if something went wrong
+- `isLoading` (boolean): Loading state
+- `reset` (function): Function to reset the widget
+- `execute` (function): Function to manually execute Turnstile (for invisible mode)
+- `getResponse` (function): Function to get the current token
+- `widgetId` (string | null): The widget ID returned by Turnstile
+
+## TypeScript Support
+
+This package includes full TypeScript support with exported interfaces:
+
+```tsx
+import { useTurnstile, TurnstileResponse, TurnstileOptions } from "@thind9xdev/react-turnstile";
+```
+
+## Widget Themes and Appearance
+
+### Themes
+- `light`: Light theme
+- `dark`: Dark theme  
+- `auto`: Automatically matches user's system preference
+
+### Sizes
+- `normal`: Standard size widget
+- `compact`: Smaller, compact widget
+
+### Appearance Modes
+- `always`: Widget is always visible (default)
+- `execute`: Invisible mode - widget only appears during execution
+- `interaction-only`: Widget appears only when user interaction is required
+
+## Features
+
+- ✅ Clean and modern React hook
+- ✅ Full TypeScript support
+- ✅ Automatic script loading and cleanup
+- ✅ Error handling
+- ✅ Loading states  
+- ✅ Manual token refresh and reset
+- ✅ Support for invisible mode
+- ✅ Theme and size customization
+- ✅ Language support
+- ✅ Comprehensive widget lifecycle management
+- ✅ Zero dependencies (peer dependency: React >=16.8.0)
+
+# Backend Integration
+
+## Verify Turnstile token from React with Node.js/Express Back-End:
+
+```javascript
+const express = require('express');
+const axios = require('axios');
+const app = express();
+
+app.use(express.json());
+
+const TURNSTILE_SECRET_KEY = 'YOUR_SECRET_KEY';
+
+app.post('/verify-turnstile', async (req, res) => {
+  const { token, remoteip } = req.body;
+
+  if (!token) {
+    return res.status(400).json({ success: false, message: 'Missing token' });
+  }
+
+  try {
+    const response = await axios.post('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+      secret: TURNSTILE_SECRET_KEY,
+      response: token,
+      remoteip: remoteip // optional
+    });
+
+    const { success, error_codes } = response.data;
+
+    if (success) {
+      res.json({ success: true, message: 'Verification successful' });
+    } else {
+      res.status(400).json({ 
+        success: false, 
+        message: 'Verification failed',
+        error_codes 
+      });
+    }
+  } catch (error) {
+    console.error('Turnstile verification error:', error);
+    res.status(500).json({ success: false, message: 'Internal server error' });
+  }
+});
+```
+
+## Verify Turnstile token with NestJS Back-End:
+
+### Create TurnstileMiddleware:
+```bash
+nest generate middleware turnstile
+```
+
+### Add middleware code:
+```typescript
+import { Injectable, NestMiddleware } from '@nestjs/common';
+import { Request, Response, NextFunction } from 'express';
+import axios from 'axios';
+
+@Injectable()
+export class TurnstileMiddleware implements NestMiddleware {
+  private secretKey = 'YOUR_SECRET_KEY';
+
+  async use(req: Request, res: Response, next: NextFunction) {
+    const turnstileToken = req.body.turnstileToken;
+    
+    if (!turnstileToken) {
+      return res.status(400).json({ message: 'Missing turnstileToken' });
+    }
+
+    try {
+      const response = await axios.post(
+        'https://challenges.cloudflare.com/turnstile/v0/siteverify',
+        {
+          secret: this.secretKey,
+          response: turnstileToken,
+          remoteip: req.ip
+        }
+      );
+
+      const { success, error_codes } = response.data;
+
+      if (!success) {
+        return res.status(401).json({ 
+          message: 'Invalid turnstileToken',
+          error_codes 
+        });
+      }
+
+      next();
+    } catch (error) {
+      console.error('Turnstile verification error:', error);
+      return res.status(500).json({ message: 'Internal Server Error' });
+    }
+  }
+}
+```
+
+## Getting Started with Cloudflare Turnstile
+
+1. **Sign up for Cloudflare**: Visit [Cloudflare Dashboard](https://dash.cloudflare.com/)
+2. **Navigate to Turnstile**: Go to "Turnstile" in the sidebar
+3. **Create a Site**: Click "Add Site" and configure your domain
+4. **Get your keys**: Copy your Site Key and Secret Key
+5. **Configure your site**: Set up allowed domains and other settings
+
+## Error Handling
+
+Common error codes and their meanings:
+
+- `missing-input-secret`: The secret parameter is missing
+- `invalid-input-secret`: The secret parameter is invalid or malformed
+- `missing-input-response`: The response parameter is missing
+- `invalid-input-response`: The response parameter is invalid or malformed
+- `bad-request`: The request is invalid or malformed
+- `timeout-or-duplicate`: The response parameter has already been validated before
+
+## Browser Support
+
+Cloudflare Turnstile works in all modern browsers that support:
+- ES6 Promises
+- Fetch API or XMLHttpRequest
+- Modern JavaScript features
+
+## Migration from reCAPTCHA
+
+If you're migrating from Google reCAPTCHA, the main differences are:
+
+1. **Script URL**: Uses Cloudflare's CDN instead of Google's
+2. **API Methods**: Different method names and parameters
+3. **Verification endpoint**: Uses Cloudflare's verification API
+4. **Configuration options**: Different theme and customization options
+5. **Privacy**: Better privacy protection as Cloudflare doesn't track users
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License.
+
+## Author
+
+Copyright 2024 thind9xdev
+
+## Links
+
+- [Cloudflare Turnstile Documentation](https://developers.cloudflare.com/turnstile/)
+- [GitHub Repository](https://github.com/thind9xdev/react-turnstile1)
+- [NPM Package](https://www.npmjs.com/package/@thind9xdev/react-turnstile)

package/dist/components/TurnstileComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TurnstileOptions } from '../hooks/useTurnstile';
+export interface TurnstileComponentProps extends TurnstileOptions {
+    siteKey: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface TurnstileComponentRef {
+    reset: () => void;
+    execute: () => void;
+    getResponse: () => string | null;
+}
+export declare const TurnstileComponent: React.ForwardRefExoticComponent<TurnstileComponentProps & React.RefAttributes<TurnstileComponentRef>>;
+//# sourceMappingURL=TurnstileComponent.d.ts.map

package/dist/components/TurnstileComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TurnstileComponent.d.ts","sourceRoot":"","sources":["../../src/components/TurnstileComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAqB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEvE,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,kBAAkB,uGAY9B,CAAC"}

package/dist/components/TurnstileComponent.js

@@ -0,0 +1,65 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TurnstileComponent = void 0;
+var react_1 = __importStar(require("react"));
+var useTurnstile_1 = __importDefault(require("../hooks/useTurnstile"));
+exports.TurnstileComponent = (0, react_1.forwardRef)(function (_a, ref) {
+    var siteKey = _a.siteKey, className = _a.className, style = _a.style, options = __rest(_a, ["siteKey", "className", "style"]);
+    var _b = (0, useTurnstile_1.default)(siteKey, options), turnstileRef = _b.ref, reset = _b.reset, execute = _b.execute, getResponse = _b.getResponse;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        reset: reset,
+        execute: execute,
+        getResponse: getResponse,
+    }); }, [reset, execute, getResponse]);
+    return react_1.default.createElement("div", { ref: turnstileRef, className: className, style: style });
+});
+exports.TurnstileComponent.displayName = 'TurnstileComponent';
+//# sourceMappingURL=TurnstileComponent.js.map

package/dist/components/TurnstileComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TurnstileComponent.js","sourceRoot":"","sources":["../../src/components/TurnstileComponent.tsx"],"names":[],"mappings":";AACA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,6CAA+D;AAC/D,uEAAuE;AAc1D,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAC1C,UAAC,EAAyC,EAAE,GAAG;IAA5C,IAAA,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAK,OAAO,cAAvC,iCAAyC,CAAF;IAChC,IAAA,KAAqD,IAAA,sBAAY,EAAC,OAAO,EAAE,OAAO,CAAC,EAA5E,YAAY,SAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAmC,CAAC;IAE1F,IAAA,2BAAmB,EAAC,GAAG,EAAE,cAAM,OAAA,CAAC;QAC9B,KAAK,OAAA;QACL,OAAO,SAAA;QACP,WAAW,aAAA;KACZ,CAAC,EAJ6B,CAI7B,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnC,OAAO,uCAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AACxE,CAAC,CACF,CAAC;AAEF,0BAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TurnstileComponent';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TurnstileComponent"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useTurnstile } from "./useTurnstile";
+export type { TurnstileResponse, TurnstileOptions } from "./useTurnstile";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTurnstile = void 0;
+var useTurnstile_1 = require("./useTurnstile");
+Object.defineProperty(exports, "useTurnstile", { enumerable: true, get: function () { return __importDefault(useTurnstile_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB"}

package/dist/hooks/useTurnstile.d.ts

@@ -0,0 +1,35 @@
+export interface TurnstileResponse {
+    success: boolean;
+    error_codes?: string[];
+    challenge_ts?: string;
+    hostname?: string;
+    action?: string;
+    cdata?: string;
+}
+export interface TurnstileOptions {
+    onLoad?: () => void;
+    onSuccess?: (token: string) => void;
+    onError?: (errorCode?: string) => void;
+    onExpire?: () => void;
+    onTimeout?: () => void;
+    theme?: 'light' | 'dark' | 'auto';
+    size?: 'normal' | 'compact';
+    language?: string;
+    retry?: 'auto' | 'never';
+    'retry-interval'?: number;
+    'refresh-expired'?: 'auto' | 'manual' | 'never';
+    appearance?: 'always' | 'execute' | 'interaction-only';
+    execution?: 'render' | 'execute';
+}
+declare const useTurnstile: (siteKey: string, options?: TurnstileOptions) => {
+    ref: import("react").MutableRefObject<HTMLDivElement | null>;
+    token: string | null;
+    error: string | null;
+    isLoading: boolean;
+    reset: () => void;
+    execute: () => void;
+    getResponse: () => string | null;
+    widgetId: string | null;
+};
+export default useTurnstile;
+//# sourceMappingURL=useTurnstile.d.ts.map

package/dist/hooks/useTurnstile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTurnstile.d.ts","sourceRoot":"","sources":["../../src/hooks/useTurnstile.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,kBAAkB,CAAC;IACvD,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAeD,QAAA,MAAM,YAAY,GAChB,SAAS,MAAM,EACf,UAAS,gBAAqB;;;;;;;;;CA8L/B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/hooks/useTurnstile.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useTurnstile = function (siteKey, options) {
+    if (options === void 0) { options = {}; }
+    var _a = (0, react_1.useState)(null), token = _a[0], setToken = _a[1];
+    var _b = (0, react_1.useState)(null), error = _b[0], setError = _b[1];
+    var _c = (0, react_1.useState)(true), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = (0, react_1.useState)(null), widgetId = _d[0], setWidgetId = _d[1];
+    var containerRef = (0, react_1.useRef)(null);
+    var scriptRef = (0, react_1.useRef)(null);
+    var _e = options.theme, theme = _e === void 0 ? 'auto' : _e, _f = options.size, size = _f === void 0 ? 'normal' : _f, _g = options.language, language = _g === void 0 ? 'auto' : _g, _h = options.retry, retry = _h === void 0 ? 'auto' : _h, retryInterval = options["retry-interval"], _j = options["refresh-expired"], refreshExpired = _j === void 0 ? 'auto' : _j, _k = options.appearance, appearance = _k === void 0 ? 'always' : _k, _l = options.execution, execution = _l === void 0 ? 'render' : _l, userOnSuccess = options.onSuccess, userOnError = options.onError, userOnExpire = options.onExpire, userOnTimeout = options.onTimeout, userOnLoad = options.onLoad;
+    var onSuccess = (0, react_1.useCallback)(function (token) {
+        setToken(token);
+        setError(null);
+        setIsLoading(false);
+        userOnSuccess === null || userOnSuccess === void 0 ? void 0 : userOnSuccess(token);
+    }, [userOnSuccess]);
+    var onError = (0, react_1.useCallback)(function (errorCode) {
+        setError(errorCode || 'Turnstile verification failed');
+        setToken(null);
+        setIsLoading(false);
+        userOnError === null || userOnError === void 0 ? void 0 : userOnError(errorCode);
+    }, [userOnError]);
+    var onExpired = (0, react_1.useCallback)(function () {
+        setToken(null);
+        setError('Turnstile token expired');
+        setIsLoading(false);
+        userOnExpire === null || userOnExpire === void 0 ? void 0 : userOnExpire();
+    }, [userOnExpire]);
+    var onTimeout = (0, react_1.useCallback)(function () {
+        setError('Turnstile verification timed out');
+        setToken(null);
+        setIsLoading(false);
+        userOnTimeout === null || userOnTimeout === void 0 ? void 0 : userOnTimeout();
+    }, [userOnTimeout]);
+    var renderTurnstile = (0, react_1.useCallback)(function () {
+        if (!window.turnstile || !containerRef.current) {
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            var renderOptions_1 = {
+                sitekey: siteKey,
+                theme: theme,
+                size: size,
+                language: language,
+                retry: retry,
+                'retry-interval': retryInterval,
+                'refresh-expired': refreshExpired,
+                appearance: appearance,
+                execution: execution,
+                callback: onSuccess,
+                'error-callback': onError,
+                'expired-callback': onExpired,
+                'timeout-callback': onTimeout,
+            };
+            Object.keys(renderOptions_1).forEach(function (key) {
+                return renderOptions_1[key] === undefined &&
+                    delete renderOptions_1[key];
+            });
+            var id = window.turnstile.render(containerRef.current, renderOptions_1);
+            setWidgetId(id);
+            userOnLoad === null || userOnLoad === void 0 ? void 0 : userOnLoad();
+        }
+        catch (err) {
+            var errorMessage = err instanceof Error ? err.message : 'Failed to render Turnstile';
+            setError(errorMessage);
+            setIsLoading(false);
+        }
+    }, [
+        siteKey, theme, size, language, retry, retryInterval,
+        refreshExpired, appearance, execution, onSuccess, onError, onExpired, onTimeout, userOnLoad
+    ]);
+    (0, react_1.useEffect)(function () {
+        if (widgetId) {
+            return;
+        }
+        var scriptId = 'cloudflare-turnstile-script';
+        var onloadCallbackName = 'cfTurnstileOnload';
+        window[onloadCallbackName] = renderTurnstile;
+        if (document.getElementById(scriptId)) {
+            if (window.turnstile) {
+                renderTurnstile();
+            }
+            return;
+        }
+        var script = document.createElement('script');
+        script.id = scriptId;
+        script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?onload=".concat(onloadCallbackName);
+        script.async = false;
+        script.defer = false;
+        script.onerror = function () {
+            setError('Failed to load Turnstile script');
+            setIsLoading(false);
+        };
+        document.head.appendChild(script);
+        scriptRef.current = script;
+        return function () {
+            if (widgetId && window.turnstile) {
+                try {
+                    window.turnstile.remove(widgetId);
+                }
+                catch (err) {
+                    console.warn('Failed to remove Turnstile widget:', err);
+                }
+            }
+            delete window[onloadCallbackName];
+        };
+    }, [renderTurnstile, widgetId]);
+    var reset = (0, react_1.useCallback)(function () {
+        if (widgetId && window.turnstile) {
+            try {
+                setToken(null);
+                setError(null);
+                setIsLoading(true);
+                window.turnstile.reset(widgetId);
+            }
+            catch (err) {
+                setError('Failed to reset Turnstile');
+                setIsLoading(false);
+            }
+        }
+    }, [widgetId]);
+    var execute = (0, react_1.useCallback)(function () {
+        if (containerRef.current && window.turnstile) {
+            try {
+                setToken(null);
+                setError(null);
+                setIsLoading(true);
+                window.turnstile.execute(containerRef.current);
+            }
+            catch (err) {
+                setError('Failed to execute Turnstile');
+                setIsLoading(false);
+            }
+        }
+    }, []);
+    var getResponse = (0, react_1.useCallback)(function () {
+        if (widgetId && window.turnstile) {
+            try {
+                return window.turnstile.getResponse(widgetId);
+            }
+            catch (err) {
+                console.warn('Failed to get Turnstile response:', err);
+                return null;
+            }
+        }
+        return null;
+    }, [widgetId]);
+    return {
+        ref: containerRef,
+        token: token,
+        error: error,
+        isLoading: isLoading,
+        reset: reset,
+        execute: execute,
+        getResponse: getResponse,
+        widgetId: widgetId
+    };
+};
+exports.default = useTurnstile;
+//# sourceMappingURL=useTurnstile.js.map

package/dist/hooks/useTurnstile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTurnstile.js","sourceRoot":"","sources":["../../src/hooks/useTurnstile.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./hooks";
+export * from "./components";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./components"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,+CAA6B"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@thind9xdev/react-turnstile",
+  "version": "1.0.0",
+  "description": "A React hook for Cloudflare Turnstile integration",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "cloudflare",
+    "turnstile",
+    "cloudflare-turnstile",
+    "react-turnstile",
+    "captcha",
+    "hook",
+    "typescript"
+  ],
+  "author": "thind9xdev",
+  "homepage": "https://github.com/thind9xdev/react-turnstile",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thind9xdev/react-turnstile.git"
+  },
+  "bugs": {
+    "url": "https://github.com/thind9xdev/react-turnstile/issues"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "^5.9.2"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ]
+}