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

2. 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.

• usePubSub()