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.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• publish()

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={async () => {
          try {
            await publish("Raise Hand");
          } catch (err) {
            console.error("publish failed:", err);
          }
        }}
      >
        {" "}
        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 == "SEND_AND_RECV")
        window.alert(`${message.senderName} raise hand`);
    },
  });

  return (
    <>
      <button
        onClick={async () => {
          try {
            await publish("Raise Hand");
          } catch (err) {
            console.error("publish failed:", err);
          }
        }}
      >
        {" "}
        Raise Hand
      </button>
    </>
  );
}

API Reference

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

• usePubSub()