Skip to main content
When a view has run its course, dismissing it hands the user back to the conversation instead of leaving a spent panel on screen. useRequestClose asks the host to do that; the host owns the decision.

​
Example

After the order is placed, a “Done” button dismisses the confirmation and hands the shopper back to the conversation. 
import { useState } from "react";
import { useRequestClose } from "skybridge/web";

function CheckoutConfirmation() {
  const requestClose = useRequestClose();
  const [closing, setClosing] = useState(false);

  const handleDone = async () => {
    setClosing(true);
    await requestClose();
  };

  return (
    <div>
      <p>Your order is on its way.</p>
      <button disabled={closing} onClick={handleDone}>
        {closing ? "Closing..." : "Done"}
      </button>
    </div>
  );
}

​
Returns

useRequestClose returns a single function.

​
requestClose

requestClose(): Promise<void>;
Asks the host to dismiss the current view. The promise resolves once the request is sent, not when the view closes: the host owns the decision and returns no acknowledgement, so the view cannot tell whether it was actually dismissed.

Design for the Host

Where dismissing a view fits in the view lifecycle

useRequestModal

Open the modal view you later close

useDisplayMode

Request a different layout instead of closing