useGridLayout

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 limitations. As the order of tiles changes over time, the hook tries to keep visual updates to a minimum while trying to display important tiles such as speaking participants or screen shares.

Import

import { useGridLayout } from "@livekit/components-react";

Usage

const { layout } = useGridLayout(gridElement, trackCount);

Properties

gridElementReact.RefObject<HTMLDivElement>

trackCountnumber

Returns

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