Skip to main content
A 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. 
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<HTMLDivElement>(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 (
    <div ref={rootRef} style={{ maxHeight, overflowY: "auto" }}>
      <button onClick={() => requestSize({ width: 960, height: 600 })}>
        See all {products.length}
      </button>
      <ProductGrid products={products} />
    </div>
  );
}
The host applies what it can, so read the height actually granted from useLayout rather than assuming the request took.

​
Returns

useRequestSize returns a single function.

​
requestSize

requestSize(size: { width?: number; height?: number }): Promise<void>;
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.

useLayout

Read the height the host actually grants the view

useDisplayMode

Switch the view between inline, fullscreen, and pip

Design for the Host

Size and shape the view to fit the host