Hooks

The WUI library ships two React hooks that handle iframe communication concerns your plugin should not have to manage manually.

useAutoResize

Automatically reports your plugin's content height to the admin host so the iframe resizes as your content grows or shrinks.

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

function App() {
  useAutoResize();
  // Remaining plugin content — no other action needed
  return <Page>...</Page>;
}

How it works:

1. Attaches a ResizeObserver to document.body
2. On each size change, schedules a measurement via requestAnimationFrame
3. Reads document.documentElement.scrollHeight as the reported height
4. Only sends a resize message when the height delta exceeds 1px (prevents noise)
5. Reports the height to the host via bridge.resize()

This approach keeps resize traffic minimal while keeping the iframe height accurate.

useThemeSync

Ensures your plugin's color scheme matches the admin's current light or dark theme.

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

function App() {
  useThemeSync();
  // Theme tokens are now active — use --wui-* variables in your CSS
  return <Page>...</Page>;
}

How it works:

1. Checks the ?theme= URL query parameter first — useful for modal iframes where the bridge may not be available at render time
2. Falls back to useWhataloContext().theme from the App Bridge
3. Sets document.documentElement.setAttribute("data-theme", theme), which activates the [data-theme="dark"] CSS block in styles.css

As long as your styles reference --wui-* tokens, theme switching is automatic.

Recommended root App setup

Call both hooks at the top of your root App component before rendering any pages:

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 />;
  }
}