Surface Lifecycle

When present() is called, Imperative Surface performs a small lifecycle:

1. Check that the code is running in a browser.
2. Create an imperative-surface host element.
3. Append the host to document.body.
4. Create a React root for the surface.
5. Render the backdrop and surface panel.
6. Render the supplied body component.
7. Wait for pop() or backdrop dismissal.
8. Start the closing animation.
9. Unmount the React root and remove the host element.
10. Resolve the Promise.

The Promise is resolved after the closing animation finishes.

Browser-only API

Surfaces require window and document. Calling present() during server rendering rejects with Window not available.

For Next.js, see SSR Considerations.

Body lifecycle

The body is a normal React component. It can use hooks, local state, forms, data fetching, and other React features.

function MySurface({ pop }: SurfaceContext<boolean>) {
  const [loading, setLoading] = useState(false);

  // ...
}

When the surface is closed, its React root is unmounted automatically.