Skip to main content
import { useAutoResize } from "sunpeak";

​
Overview

useAutoResize enables automatic size reporting to the host via ResizeObserver. It watches document.body and document.documentElement for size changes and sends ui/notifications/size-changed notifications.
This hook is rarely needed. The useApp hook creates the App with autoResize: true by default, which handles this automatically. Only use useAutoResize if you create the App manually with autoResize: false.

​
Signature

function useAutoResize(app: App | null): void
​
app
App | null
required
The connected App instance, or null during initialization.

​
Usage

function MyComponent() {
  const [app, setApp] = useState<App | null>(null);

  useEffect(() => {
    const myApp = new App(
      { name: "MyApp", version: "1.0.0" },
      {},
      { autoResize: false }, // Disable default auto-resize
    );

    const transport = new PostMessageTransport(window.parent, window.parent);
    myApp.connect(transport).then(() => setApp(myApp));
  }, []);

  // Add manual auto-resize control
  useAutoResize(app);

  return <div>My content</div>;
}

​
How It Works

The hook calls app.setupSizeChangedNotifications() when app becomes non-null, and disconnects the ResizeObserver when the component unmounts. The observer monitors both document.documentElement and document.body to catch all size changes.