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, 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>;
}
App.setupSizeChangedNotifications for the underlying implementationuseApp which enables auto-resize by defaultApp constructor for configuring autoResize option
React hook that automatically reports UI size changes to the host.
Uses
ResizeObserverto watchdocument.bodyanddocument.documentElementfor size changes and sendsui/notifications/size-changednotifications.The hook automatically cleans up the
ResizeObserverwhen the component unmounts.Note: This hook is rarely needed since the
useApphook automatically enables auto-resize by default. This hook is provided for advanced cases where you create theAppmanually withautoResize: falseand want to add auto-resize behavior later.