FocusLayoutContainer
function FocusLayoutContainer(__namedParameters): Element;Defined in: packages/react/src/components/layout/FocusLayoutContainer.tsx:40
The FocusLayoutContainer is a layout component that expects two children: A small side component: In a video conference, this is usually a carousel of participants who are not in focus. And a larger main component to display the
Parameters
| Parameter | Type |
|---|---|
__namedParameters | FocusLayoutContainerProps |
Returns
Element
Example
// Basic — render focused content with a side rail.
<FocusLayoutContainer>
<CarouselLayout tracks={tracks}><ParticipantTile /></CarouselLayout>
<FocusLayout />
</FocusLayoutContainer>
// Advanced — combine grid tracks with focus-aware layout.
function FocusedRoom() {
const tracks = useTracks([{ source: Track.Source.Camera, withPlaceholder: true }]);
return (
<VoiceRoom agent={agent}>
<FocusLayoutContainer>
<CarouselLayout tracks={tracks}><ParticipantTile /></CarouselLayout>
<FocusLayout />
</FocusLayoutContainer>
</VoiceRoom>
);
}