Valora
API Reference@valora-ai/reactindexFunctions

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

ParameterType
__namedParametersFocusLayoutProps

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>
  );
}

On this page

Valora is local-first

No API key, no server — everything in this doc runs on-device.

Star on GitHub