useParticipantAttributes

function useParticipantAttributes(props?): {
  attributes: Readonly<Record<string, string>> | undefined;
};

{
  attributes: Readonly<Record<string, string>> | undefined;
}

attributes: Readonly<Record<string, string>> | undefined;

// Basic — read all attributes for the current participant context.
const { attributes } = useParticipantAttributes();

// Advanced — render all known attributes for a participant.
function ParticipantAttributes({ participant }: { participant: Participant }) {
  const { attributes } = useParticipantAttributes({ participant });

  return <>{Object.entries(attributes ?? {}).map(([key, value]) => <span key={key}>{key}: {value}</span>)}</>;
}

function Roster() {
  const participants = useParticipants();
  return <>{participants.map((participant) => <ParticipantAttributes key={participant.identity} participant={participant} />)}</>;
}

function App() {
  return <VoiceRoom agent={agent}><Roster /></VoiceRoom>;
}