Hooks

La biblioteca WUI incluye dos hooks de React que gestionan las comunicaciones del iframe que tu plugin no debería tener que manejar manualmente.

useAutoResize

Reporta automáticamente la altura del contenido de tu plugin al host del admin para que el iframe se redimensione a medida que tu contenido crece o se reduce.

import { useAutoResize } from "./components/whatalo-ui";

function App() {
  useAutoResize();
  // Resto del contenido del plugin — no se requiere ninguna otra acción
  return <Page>...</Page>;
}

Cómo funciona:

1. Adjunta un ResizeObserver a document.body
2. En cada cambio de tamaño, programa una medición mediante requestAnimationFrame
3. Lee document.documentElement.scrollHeight como la altura reportada
4. Solo envía un mensaje de resize cuando el delta de altura supera 1px (evita ruido)
5. Reporta la altura al host mediante bridge.resize()

Este enfoque mantiene el tráfico de resize mínimo mientras mantiene la altura del iframe precisa.

useThemeSync

Asegura que el esquema de colores de tu plugin coincida con el tema actual del admin (claro u oscuro).

import { useThemeSync } from "./components/whatalo-ui";

function App() {
  useThemeSync();
  // Los tokens de tema están activos — usa variables --wui-* en tu CSS
  return <Page>...</Page>;
}

Cómo funciona:

1. Primero verifica el parámetro de consulta URL ?theme= — útil para iframes modales donde el bridge puede no estar disponible en el momento del render
2. Recurre a useWhataloContext().theme desde el App Bridge
3. Establece document.documentElement.setAttribute("data-theme", theme), lo que activa el bloque CSS [data-theme="dark"] en styles.css

Mientras tus estilos referencien tokens --wui-*, el cambio de tema es automático.

Configuración recomendada del componente App raíz

Llama a ambos hooks en la parte superior de tu componente App raíz antes de renderizar cualquier página:

import { useAutoResize, useThemeSync, Spinner } from "./components/whatalo-ui";
import { useAppBridge } from "@whatalo/plugin-sdk/bridge";

function App() {
  // Set up iframe height reporting and theme synchronization
  useAutoResize();
  useThemeSync();

  const { currentPage, isReady } = useAppBridge();

  // Wait for the bridge handshake before rendering
  if (!isReady) return <Spinner />;

  // Route between plugin pages using the page slug from the manifest
  switch (currentPage) {
    case "settings":
      return <SettingsPage />;
    default:
      return <DashboardPage />;
  }
}