usePeerIds

The usePeerIds hook returns peerIds of all peers inside a Huddle01 room.

Name	Description	Return Type
peerIds	List of peerIds.	string[]

Example Usage

import { usePeerIds } from "@huddle01/react/hooks";
import { RemotePeerCard } from "@components/RemotePeerCard";
 
const {
    peerIds
  } = usePeerIds({
  roles: [],
  labels: [],
  onPeerRoleUpdate(data) {}
  });
 
return (
  <div>
    {peerIds.map((peerId) => (
      {/* Use this peerId and pass it in custom component which shows viewport by using hooks such as `useRemotePeer` */}
      <RemotePeerCard key={peerId}>{peerId} />
    ))}
  </div>
)

Props

The usePeerIds hook accepts an object with the following fields as props.

roles

Optional

Description	Type
The user roles for which you want the corressponding peerIds.	string[]

Example Usage

const peerIds = usePeerIds({ roles: ["speaker"] });

labels

Optional

Description	Type
The media type being shared by the users for which you want the corressponding peerIds.	Array<'audio' \| 'video' \| 'screen-video' \| 'screen-audio' \| string>

Example Usage

const peerIds = usePeerIds({ labels: ["audio"] });

onLobbyPeersUpdated

Optional

Description	Return Type
This function will be called when a peer's role is updated.	void

Parameter Name	Type	Description	Required
data	{ peerId: string; newRole: string; prevRole: string; }	Data related to the peer role update	Yes

Example Usage

const lobby = useLobby({ onLobbyPeersUpdated: (data) => {
	console.log("Peer role updated!");
  console.log("peerId: ", data.peerId);
  console.log("prevRole: ", data.prevRole);
  console.log("newRole: ", data.newRole);
    // your code here
}});
 
const peerIds = usePeerIds({ labels: ["audio"] });

useLobby useLocalPeer