fix: respect widget size when appearance is interaction-only (#229)

Author: CatLover01

.changeset/sour-states-give.md

@@ -0,0 +1,7 @@
+---
+"@marsidev/react-turnstile": patch
+---
+
+fix: respect widget size when appearance is interaction-only
+
+Previously, setting `appearance: "interaction-only"` would ignore the `size` prop and always use a hardcoded `fit-content` width. Now the container respects the chosen size (e.g. `flexible`, `compact`, `normal`) while still collapsing height for the smaller widget.

packages/lib/src/lib.tsx

@@ -69,17 +69,20 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 
   const widgetSize = options.size;
 
-  const calculateContainerStyle = useCallback(() => {
-    return typeof widgetSize === "undefined"
-      ? {}
-      : options.execution === "execute"
-        ? CONTAINER_STYLE_SET.invisible
-        : options.appearance === "interaction-only"
-          ? CONTAINER_STYLE_SET.interactionOnly
-          : CONTAINER_STYLE_SET[widgetSize];
+  const getContainerStyle = useCallback(() => {
+    if (typeof widgetSize === "undefined") return {};
+    if (options.execution === "execute") return CONTAINER_STYLE_SET.invisible;
+
+    const baseStyle = CONTAINER_STYLE_SET[widgetSize];
+
+    if (options.appearance === "interaction-only") {
+      return { ...baseStyle, height: "auto" };
+    }
+
+    return baseStyle;
   }, [options.execution, widgetSize, options.appearance]);
 
-  const [containerStyle, setContainerStyle] = useState(calculateContainerStyle());
+  const [containerStyle, setContainerStyle] = useState(getContainerStyle());
   const containerRef = useRef<HTMLElement | null>(null);
   const [turnstileLoaded, setTurnstileLoaded] = useState(false);
   const widgetId = useRef<string | undefined | null>(undefined);
@@ -344,7 +347,7 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
         if (widgetId.current) onWidgetLoad?.(widgetId.current);
 
         if (options.execution !== "execute") {
-          setContainerStyle(widgetSize ? CONTAINER_STYLE_SET[widgetSize] : {});
+          setContainerStyle(getContainerStyle());
         }
 
         return id;
@@ -367,7 +370,7 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
         }
 
         turnstile.execute(containerRef.current);
-        setContainerStyle(widgetSize ? CONTAINER_STYLE_SET[widgetSize] : {});
+        setContainerStyle(getContainerStyle());
       },
 
       isExpired() {
@@ -387,7 +390,8 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
     containerRef,
     checkIfTurnstileLoaded,
     turnstileLoaded,
-    onWidgetLoad
+    onWidgetLoad,
+    getContainerStyle
   ]);
 
   /* Set the turnstile as loaded, in case the onload callback never runs. (e.g., when manually injecting the script without specifying the `onload` param) */
@@ -416,7 +420,7 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 
   // Update style
   useEffect(() => {
-    setContainerStyle(calculateContainerStyle());
+    setContainerStyle(getContainerStyle());
   }, [options.execution, widgetSize, appearance]);
 
   // onLoadScript callback

packages/lib/src/types.ts

@@ -243,7 +243,7 @@ export interface InjectTurnstileScriptParams {
 }
 
 export type ContainerSizeSet = {
-  [size in NonNullable<ComponentRenderOptions["size"]> | "interactionOnly"]: React.CSSProperties;
+  [size in NonNullable<ComponentRenderOptions["size"]>]: React.CSSProperties;
 };
 
 /**

packages/lib/src/utils.ts

@@ -105,11 +105,6 @@ export const CONTAINER_STYLE_SET: ContainerSizeSet = {
     minWidth: 300,
     width: "100%",
     height: 65
-  },
-  interactionOnly: {
-    width: "fit-content",
-    height: "auto",
-    display: "flex"
   }
 };
 
@@ -121,7 +116,7 @@ export const CONTAINER_STYLE_SET: ContainerSizeSet = {
  * @returns
  */
 export function getTurnstileSizeOpts(size: keyof ContainerSizeSet | undefined) {
-  if (size !== "invisible" && size !== "interactionOnly") {
+  if (size !== "invisible") {
     return size;
   }