FocusLayout
function FocusLayout(__namedParameters): Element;Defined in: packages/react/src/components/layout/FocusLayout.tsx:46
The FocusLayout component is just a light wrapper around the ParticipantTile to display a single participant.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | FocusLayoutProps |
Returns
Element
Example
// Basic — display participants with a focus tile and thumbnail strip.
<FocusLayout participants={participants} />
// Advanced — focus the first camera track and list the rest.
function FocusedTracks() {
const tracks = useTracks([Track.Source.Camera]);
const [focus, ...carouselTracks] = tracks;
return (
<VoiceRoom agent={agent}>
<FocusLayout trackRef={focus} />
<CarouselLayout tracks={carouselTracks} orientation="horizontal">
<ParticipantTile />
</CarouselLayout>
</VoiceRoom>
);
}