The connected App instance, or null during initialization
OptionalelementRef: RefObject<HTMLElement | null>Currently unused. The hook always observes document.body
and document.documentElement regardless of this value. Passing a ref will
cause unnecessary effect re-runs; omit this parameter.
function MyComponent() {
// For custom App options, create App manually instead of using useApp
const [app, setApp] = useState<App | null>(null);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const myApp = new App(
{ name: "MyApp", version: "1.0.0" },
{}, // capabilities
{ autoResize: false } // Disable default auto-resize
);
const transport = new PostMessageTransport(window.parent);
myApp.connect(transport)
.then(() => setApp(myApp))
.catch((err) => setError(err));
}, []);
// Add manual auto-resize control
useAutoResize(app);
if (error) return <div>Connection failed: {error.message}</div>;
return <div>My content</div>;
}
autoResize option
React hook that automatically reports UI size changes to the host.
Uses ResizeObserver to watch
document.bodyanddocument.documentElementfor size changes and sendsui/notifications/size-changenotifications.Note: This hook is rarely needed since the useApp hook automatically enables auto-resize by default. This hook is provided for advanced cases where you create the App manually with
autoResize: falseand want to add auto-resize behavior later.