> ## 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.
# useRequestSize
> Ask the host to resize the view to fit its content
export const Compat = ({alpic = false, chatgpt = false, claude = false, compact = false}) =>
;
A [view](/build/view) renders at a size the host sets. `useRequestSize` lets the view ask the host to resize it to fit its content.
## Example
The carousel grows to fit its product grid as items load, and widens to show the full catalog when the shopper expands it.
```tsx highlight={1,5,15,25} theme={null}
import { useRequestSize, useLayout } from "skybridge/web";
import { useEffect, useRef } from "react";
function Carousel({ products }: { products: Product[] }) {
const requestSize = useRequestSize();
const { maxHeight } = useLayout();
const rootRef = useRef(null);
useEffect(() => {
const root = rootRef.current;
if (!root) {
return;
}
const observer = new ResizeObserver(() => {
requestSize({ height: root.scrollHeight });
});
observer.observe(root);
return () => {
observer.disconnect();
};
}, [requestSize]);
return (
);
}
```
The host applies what it can, so read the height actually granted from [`useLayout`](/api-reference/use-layout) rather than assuming the request took.
## Returns
`useRequestSize` returns a single function.
### `requestSize`
```tsx theme={null}
requestSize(size: { width?: number; height?: number }): Promise;
```
Asks the host to resize the view, `width` and `height` in pixels; omit a dimension to leave it unchanged. The promise resolves once the request is sent, not once the host applies it: the host is free to clamp, ignore, or partially honor the size.
Read the height the host actually grants the view
Switch the view between inline, fullscreen, and pip
Size and shape the view to fit the host