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.