> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.
# useDisplayMode
> Read and switch how the host lays out the view
export const Compat = ({alpic = false, chatgpt = false, claude = false, cursor = false, goose = false, compact = false}) =>
;
A host renders the [view](/build/view) in one of a few layouts: a compact inline panel, fullscreen, or a floating picture-in-picture. `useDisplayMode` lets the view read which layout it is in and ask the host to switch to another.
## Example
The product carousel shows more columns when it takes the full screen. From the inline panel it offers a "See all" button to expand, and once expanded, a "Collapse" button to shrink back.
```tsx highlight={4,10,13,16} theme={null}
import { useDisplayMode } from "skybridge/web";
function Carousel({ products }: { products: Product[] }) {
const [mode, setMode] = useDisplayMode();
return (
);
}
```
## Returns
`useDisplayMode` returns a tuple: the current mode first, the setter second.
### `displayMode`
```tsx theme={null}
displayMode: DisplayMode;
```
The mode the host is currently rendering the view in. It updates on its own when the host changes the layout (the user expanding or collapsing the view, for instance), so a component can render against it directly.
| Mode | Layout | Requestable |
| -------------- | ----------------------------------------------------------------------------------------- | :-----------------------------------: |
| `"inline"` | Compact panel embedded in the conversation, the default | |
| `"fullscreen"` | The view takes over the host surface | |
| `"pip"` | Picture in picture, floating above the conversation | |
| `"modal"` | Overlay opened through [`useRequestModal`](/api-reference/use-request-modal), host-driven | |
### `setDisplayMode`
```tsx theme={null}
setDisplayMode(mode: RequestDisplayMode): Promise<{ mode: RequestDisplayMode }>;
```
Asks the host to switch the view to `mode`. The host decides: it can grant the request, keep the current mode, or coerce to another. The promise resolves with the mode actually applied, so read the resolved value rather than assuming the request took.
**`mode`** the mode to request, every [`DisplayMode`](#displaymode) except `"modal"`:
```tsx theme={null}
// "inline" | "fullscreen" | "pip"
type RequestDisplayMode = Exclude;
```
On mobile, **ChatGPT** coerces a `"pip"` request to `"fullscreen"`.
Adapt the view to display mode, theme, and device
Read the space and insets a mode switch brings
Open the view as a host modal