useRequestModal - Skybridge

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

​Example

​Returns

​isOpen

​params

​open

Design for the Host

useDisplayMode

useRequestClose

Example

Returns

`isOpen`

`params`

`open`