Skip to main content
A modal overlay is host-owned: a view cannot mount one itself. useRequestModal lets the view ask the host to open it as a modal, pass data into it, and read whether the modal is currently showing.

​
Example

The carousel opens a product in a modal to confirm adding it to the cart, then runs the add when the shopper confirms. 
import { useRequestModal } from "skybridge/web";

function Carousel() {
  const { isOpen, params, open } = useRequestModal();

  if (isOpen) {
    return (
      <ConfirmAddToCart productId={params?.productId} />
    );
  }

  return (
    <ProductGrid
      onSelect={(product) =>
        open({ title: product.name, params: { productId: product.id } })
      }
    />
  );
}

​
Returns

useRequestModal returns the modal state plus an opener.

​
isOpen

isOpen: boolean;
true when the host is currently rendering the view in "modal" display mode. It tracks the modal lifecycle on its own: true after open, back to false when the modal closes.

​
params

params: Record<string, unknown> | undefined;
The params the modal was opened with, surfaced back to the view while it is open. undefined when no modal is open, or when open was called without params.

​
open

open(options: RequestModalOptions): void;
Asks the host to render the view as a modal. Returns void: read the result from isOpen and params once the modal opens. options 
type RequestModalOptions = {
  title?: string; // label for the modal chrome
  params?: Record<string, unknown>; // data surfaced back through `params` while the modal is open
  template?: string; // view resource to render, when it differs from the current view
  anchor?: { top?: number; left?: number; width?: number; height?: number }; // pixel bounds to position the modal
};
ChatGPT opens a native host modal with the full RequestModalOptions. Other hosts polyfill it, rendering the modal inside the view’s iframe and honoring only params; title, template, and anchor are ignored.

Design for the Host

Adapt the view to display mode, theme, and device

useDisplayMode

Read and request the non-modal display modes

useRequestClose

Ask the host to dismiss the view