TrackLoop

The TrackLoop component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. TrackLoop creates a TrackRefContext for each track that you can use to e.g. render the track.

Import

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

Usage

const trackRefs = useTracks([Track.Source.Camera]);
<TrackLoop tracks={trackRefs}>
  <TrackRefContext.Consumer>
    {(trackRef) => trackRef && <VideoTrack trackRef={trackRef} />}
  </TrackRefContext.Consumer>
</TrackLoop>;

Properties

childrenReact.ReactNode

The template component to be used in the loop.

tracksTrackReference[] | TrackReferenceOrPlaceholder[]

Track references to loop over. You can the use useTracks() hook to get TrackReferences.