add flexible size

package.json

@@ -27,7 +27,7 @@
   "devDependencies": {
     "@types/react": "^18.0.21",
     "prettier": "^2.7.1",
-    "turnstile-types": "^1.1.3",
+    "turnstile-types": "^1.2.2",
     "typescript": "^4.8.4"
   }
 }

src/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
 import {
   TurnstileObject,
-  TurnstileOptions,
   SupportedLanguages,
+  RenderParameters,
 } from "turnstile-types";
 
 const globalNamespace = (
@@ -52,7 +52,7 @@ const turnstileLoadPromise = new Promise((resolve, reject) => {
 export default function Turnstile({
   id,
   className,
-  style,
+  style: customStyle,
   sitekey,
   action,
   cData,
@@ -94,6 +94,12 @@ export default function Turnstile({
 
   const ref = userRef ?? ownRef;
 
+  const style = {
+    width: size === "compact" ? "130px" : size === "flexible" ? "100%" : "300px",
+    height: size === "compact" ? "120px" : "65px",
+    ...(customStyle ?? {}),
+  }
+
   useEffect(() => {
     if (!ref.current) return;
     let cancelled = false;
@@ -110,7 +116,7 @@ export default function Turnstile({
       }
       if (cancelled || !ref.current) return;
       let boundTurnstileObject: BoundTurnstileObject;
-      const turnstileOptions: TurnstileOptions = {
+      const turnstileOptions: RenderParameters = {
         sitekey,
         action,
         cData,
@@ -135,8 +141,8 @@ export default function Turnstile({
         },
         "error-callback": (error?: any) =>
           inplaceState.onError?.(error, boundTurnstileObject),
-        "expired-callback": (token: string) =>
-          inplaceState.onExpire?.(token, boundTurnstileObject),
+        "expired-callback": () =>
+          inplaceState.onExpire?.(boundTurnstileObject),
         "timeout-callback": () =>
           inplaceState.onTimeout?.(boundTurnstileObject),
         "after-interactive-callback": () =>
@@ -202,8 +208,6 @@ export default function Turnstile({
         fixedSize
           ? {
               ...(style ?? {}),
-              width: size === "compact" ? "130px" : "300px",
-              height: size === "compact" ? "120px" : "65px",
             }
           : style
       }
@@ -220,7 +224,7 @@ export interface TurnstileProps extends TurnstileCallbacks {
   tabIndex?: number;
   responseField?: boolean;
   responseFieldName?: string;
-  size?: "normal" | "invisible" | "compact";
+  size?: "normal" | "compact" | "flexible";
   fixedSize?: boolean;
   retry?: "auto" | "never";
   retryInterval?: number;
@@ -245,15 +249,15 @@ export interface TurnstileCallbacks {
     error?: Error | any,
     boundTurnstile?: BoundTurnstileObject,
   ) => void;
-  onExpire?: (token: string, boundTurnstile: BoundTurnstileObject) => void;
+  onExpire?: (boundTurnstile: BoundTurnstileObject) => void;
   onTimeout?: (boundTurnstile: BoundTurnstileObject) => void;
   onAfterInteractive?: (boundTurnstile: BoundTurnstileObject) => void;
   onBeforeInteractive?: (boundTurnstile: BoundTurnstileObject) => void;
   onUnsupported?: (boundTurnstile: BoundTurnstileObject) => void;
 }
 
 export interface BoundTurnstileObject {
-  execute: (options?: TurnstileOptions) => void;
+  execute: (options?: RenderParameters) => void;
   reset: () => void;
   getResponse: () => void;
   isExpired: () => boolean;