Skip to main content
Version: 0.1.x

Raise Hand - React

This guide explains how PubSub can be used to implement the Raise Hand functionality. If you are not familiar with the PubSub mechanism and usePubSub hook, you can follow this guide.

Implementing Raise Hand

  1. To implement this functionality, first create a Raise Hand button. When this button is clicked, publish a message with the topic RAISE_HAND.
// importing usePubSub hook from react-sdk
import { usePubSub } from "@videosdk.live/react-sdk";

function MeetingView() {
// destructure publish method from usePubSub hook
const { publish } = usePubSub("RAISE_HAND");

return (
<>
<button
onClick={() => {
publish("Raise Hand");
}}
>
{" "}
Raise Hand
</button>
</>
);
}
  1. Next, alert all the speakers, displaying the identity of the participant who raised their hand.
import { useMeeting } from "@videosdk.live/react-sdk";

function MeetingView() {
const { localParticipant } = useMeeting();

// destructure publish method from usePubSub hook
const { publish } = usePubSub("RAISE_HAND", {
onMessageReceived: (message) => {
if (localParticipant.mode == "CONFERENCE")
window.alert(`${message.senderName} raise hand`);
},
});

return (
<>
<button
onClick={() => {
publish("Raise Hand");
}}
>
{" "}
Raise Hand
</button>
</>
);
}

API Reference

The API references for all the methods and events utilized in this guide are provided below.

Got a Question? Ask us on discord