> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# useDisplayMode

> Read and control view display modes: inline, fullscreen, or picture-in-picture.

<Info>
  **Runtime Support**: ChatGPT Apps | MCP Apps

  Note: MCP Apps do not support the "modal" display mode. Requesting modal mode in MCP Apps will throw an error.
</Info>

The `useDisplayMode` hook allows you to read and control the display mode of your view. Views can be displayed in three modes: `inline`, `fullscreen`, or `pip` (picture-in-picture).

## Basic usage

```tsx theme={null}
import { useDisplayMode } from "skybridge/web";

function ExpandableView() {
  const [displayMode, setDisplayMode] = useDisplayMode();

  return (
    <div>
      <p>Current mode: {displayMode}</p>
      <button onClick={() => setDisplayMode("fullscreen")}>
        Go Fullscreen
      </button>
      <button onClick={() => setDisplayMode("inline")}>
        Back to Inline
      </button>
    </div>
  );
}
```

## Returns

The hook returns a tuple with two elements:

### `displayMode`

```tsx theme={null}
displayMode: "inline" | "fullscreen" | "pip"
```

The current display mode of the view:

* `inline` - The view is displayed inline within the chat
* `fullscreen` - The view takes up the full screen
* `pip` - The view is displayed in picture-in-picture mode (on mobile, this is coerced to fullscreen)

### `setDisplayMode`

```tsx theme={null}
setDisplayMode: (mode: DisplayMode) => void
```

A function to request a new display mode. Note that the host may reject the request.

## Examples

### Fullscreen Media Player

```tsx theme={null}
import { useDisplayMode } from "skybridge/web";

function MediaPlayer() {
  const [displayMode, setDisplayMode] = useDisplayMode();
  const isFullscreen = displayMode === "fullscreen";

  return (
    <div className={isFullscreen ? "fullscreen-player" : "inline-player"}>
      <video src="/media/video.mp4" controls />
      <button onClick={() => setDisplayMode(isFullscreen ? "inline" : "fullscreen")}>
        {isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
      </button>
    </div>
  );
}
```

### Adaptive Layout

```tsx theme={null}
import { useDisplayMode } from "skybridge/web";

function AdaptiveView() {
  const [displayMode] = useDisplayMode();

  if (displayMode === "fullscreen") {
    return (
      <div className="detailed-view">
        <h1>Full Details</h1>
        {/* Show comprehensive content */}
      </div>
    );
  }

  return (
    <div className="compact-view">
      <h3>Summary</h3>
      {/* Show condensed content */}
    </div>
  );
}
```

### Picture-in-Picture Mode

```tsx theme={null}
import { useDisplayMode, useUser } from "skybridge/web";

function FloatingView() {
  const [displayMode, setDisplayMode] = useDisplayMode();
  const { userAgent } = useUser();
  const isMobile = userAgent.device.type === "mobile";

  return (
    <div>
      <p>Mode: {displayMode}</p>
      {!isMobile && (
        <button onClick={() => setDisplayMode("pip")}>
          Float (PiP)
        </button>
      )}
      {isMobile && (
        <p>PiP mode is not available on mobile devices</p>
      )}
    </div>
  );
}
```