@kcaptcha/react 0.1.0

package/dist/KCaptcha.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+export interface KCaptchaProps {
+    /**
+     * REQUIRED. Base path of the kCAPTCHA router on your server, e.g. "/login/kcaptcha".
+     * If it is missing at runtime, an error is printed to the console and shown in place of the widget.
+     */
+    endpoint: string;
+    /** Width of the checkbox button in px (160-600). Default 300. */
+    width?: number;
+    /** Height of the checkbox button in px (40-120). Default 74. */
+    height?: number;
+    /** Accent colour of the checkbox button (any CSS colour). Default "#3fb950". */
+    color?: string;
+    /** Name of the hidden form field that receives the pass token. Default "kcaptcha_token". */
+    name?: string;
+    /** Called with the pass token once the user solves the CAPTCHA. */
+    onVerify?: (token: string) => void;
+    /** Called when a solved CAPTCHA's pass token expires unused. */
+    onExpire?: () => void;
+    className?: string;
+    /** Layout styles for the wrapper (margin, alignment, ...). Size the button with width/height instead. */
+    style?: CSSProperties;
+}
+/** Methods available through a ref. */
+export interface KCaptchaRef {
+    /** The pass token, or null if not verified. */
+    getToken(): string | null;
+    /** Uncheck the widget. Call this after a failed submit: a pass token works only once. */
+    reset(): void;
+}
+export declare const KCaptcha: import("react").ForwardRefExoticComponent<KCaptchaProps & import("react").RefAttributes<KCaptchaRef>>;

package/dist/KCaptcha.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { mount } from '@kcaptcha/client';
+export const KCaptcha = forwardRef(function KCaptcha(props, ref) {
+    const { endpoint, width, height, color, name, onVerify, onExpire, className, style } = props;
+    const hostRef = useRef(null);
+    const handleRef = useRef(null);
+    // Keep the latest callbacks in refs so an inline arrow function in the parent
+    // does not tear down and rebuild the widget on every render.
+    const onVerifyRef = useRef(onVerify);
+    const onExpireRef = useRef(onExpire);
+    useEffect(() => {
+        onVerifyRef.current = onVerify;
+        onExpireRef.current = onExpire;
+    });
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        // mount() validates the options. With no endpoint it logs the error and
+        // renders a red message into `host`, then returns null.
+        const handle = mount(host, {
+            endpoint,
+            width,
+            height,
+            color,
+            name,
+            onVerify: (token) => onVerifyRef.current?.(token),
+            onExpire: () => onExpireRef.current?.(),
+        });
+        handleRef.current = handle;
+        return () => {
+            handle?.destroy();
+            handleRef.current = null;
+            host.replaceChildren(); // also clears the error box, if one was shown
+        };
+    }, [endpoint, width, height, color, name]);
+    useImperativeHandle(ref, () => ({
+        getToken: () => handleRef.current?.getToken() ?? null,
+        reset: () => handleRef.current?.reset(),
+    }), []);
+    return _jsx("div", { ref: hostRef, className: className, style: style });
+});
+//# sourceMappingURL=KCaptcha.js.map

package/dist/KCaptcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KCaptcha.js","sourceRoot":"","sources":["../src/KCaptcha.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAkCzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAA6B,SAAS,QAAQ,CAAC,KAAK,EAAE,GAAG;IACzF,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE7F,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEtD,8EAA8E;IAC9E,6DAA6D;IAC7D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC/B,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,wEAAwE;QACxE,wDAAwD;QACxD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE;YACzB,QAAQ;YACR,KAAK;YACL,MAAM;YACN,KAAK;YACL,IAAI;YACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC;YACjD,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,EAAE;SACxC,CAAC,CAAC;QACH,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,CAAC;YAClB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,8CAA8C;QACxE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE3C,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,IAAI;QACrD,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE;KACxC,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,cAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AACnE,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { KCaptcha } from './KCaptcha.js';
+export type { KCaptchaProps, KCaptchaRef } from './KCaptcha.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { KCaptcha } from './KCaptcha.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@kcaptcha/react",
+  "version": "0.1.0",
+  "description": "React component for kCAPTCHA",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@kcaptcha/client": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0"
+  }
+}