CarouselLayout

The CarouselLayout component displays a list of tracks in a scroll container. It will display as many tiles as possible and overflow the rest.

Import

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

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

const tracks = useTracks([Track.Source.Camera]);
<CarouselLayout tracks={tracks}>
  <ParticipantTile />
</CarouselLayout>;

childrenReact.ReactNode

tracksTrackReferenceOrPlaceholder[]

orientation?'vertical' | 'horizontal'

(Optional) Place the tiles vertically or horizontally next to each other. If undefined orientation is guessed by the dimensions of the container.