next-turnstile
Version:
Cloudflare Turnstile integration for Next.js applications
86 lines • 3.78 kB
JavaScript
;
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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Turnstile = void 0;
const react_1 = __importStar(require("react"));
const Turnstile = ({ siteKey, onVerify, onError, onExpire, onLoad, id = "turnstile-widget", className, theme = "auto", tabIndex, responseField = true, responseFieldName = "cf-turnstile-response", size = "normal", retry = "auto", retryInterval = 8000, refreshExpired = "auto", appearance = "always", execution = "render", cData, language, sandbox = false, }) => {
const widgetRef = (0, react_1.useRef)();
const containerRef = (0, react_1.useRef)(null);
const cleanup = (0, react_1.useCallback)(() => {
var _a;
if (widgetRef.current) {
(_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.remove(widgetRef.current);
widgetRef.current = undefined;
}
}, []);
(0, react_1.useEffect)(() => {
const scriptId = "cf-turnstile-script";
const existingScript = document.getElementById(scriptId);
if (!existingScript) {
const script = document.createElement("script");
script.id = scriptId;
script.src =
"https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback";
script.async = true;
script.defer = true;
window.onloadTurnstileCallback = () => {
renderWidget();
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
};
document.head.appendChild(script);
}
else if (window.turnstile) {
renderWidget();
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
}
return cleanup;
}, [siteKey, sandbox]);
const renderWidget = () => {
if (!containerRef.current || !window.turnstile)
return;
cleanup();
widgetRef.current = window.turnstile.render(containerRef.current, {
sitekey: sandbox ? "1x00000000000000000000AA" : siteKey,
callback: onVerify,
"error-callback": onError,
"expired-callback": onExpire,
theme,
tabindex: tabIndex,
"response-field": responseField,
"response-field-name": responseFieldName,
size,
retry,
"retry-interval": retryInterval,
"refresh-expired": refreshExpired,
appearance,
execution,
cdata: cData,
language,
});
};
return react_1.default.createElement("div", { ref: containerRef, id: id, className: className });
};
exports.Turnstile = Turnstile;
//# sourceMappingURL=Turnstile.js.map