useGridLayout

function useGridLayout(gridElement, trackCount): {
  layout: GridLayoutInfo;
  containerWidth: number;
  containerHeight: number;
};

Defined in: packages/react/src/hooks/layout/useGridLayout.ts:39

The useGridLayout hook tries to select the best layout to fit all tiles. If the available screen space is not enough, it will reduce the number of maximum visible tiles and select a layout that still works visually within the given

Parameters

Parameter	Type
`gridElement`	`RefObject`<`HTMLDivElement`>
`trackCount`	`number`

Returns

{
  layout: GridLayoutInfo;
  containerWidth: number;
  containerHeight: number;
}

layout

layout: GridLayoutInfo;

containerWidth

containerWidth: number;

containerHeight

containerHeight: number;

Example

// Basic — calculate a grid layout for the current tile count.
const { layout } = useGridLayout(gridElement, trackCount);

// Advanced — size a track grid from the active camera tracks.
function CameraGridContent() {
  const gridElement = React.useRef<HTMLDivElement>(null);
  const tracks = useTracks([{ source: Track.Source.Camera, withPlaceholder: true }]);
  const { layout, containerWidth, containerHeight } = useGridLayout(gridElement, tracks.length);

  return (
    <div ref={gridElement} data-layout={String(layout)}>
      {containerWidth}x{containerHeight} for {tracks.length} tiles
    </div>
  );
}

function CameraGrid() {
  return <VoiceRoom agent={agent}><CameraGridContent /></VoiceRoom>;
}