GridLayout

The GridLayout component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display.

Import

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

Remarks

To ensure visual stability when tiles are reordered due to track updates, the component uses the useVisualStableUpdate hook.

Usage

<LiveKitRoom>
  <GridLayout tracks={tracks}>
    <ParticipantTile />
  </GridLayout>
<LiveKitRoom>

Properties

childrenReact.ReactNodeRequired

tracksTrackReferenceOrPlaceholder[]Required