Use Web Core Hooks

RealtimeKit's React UI Kit provides multiple Hooks. Hooks let you use different React features from your components.

This provides seamless developer experience when integrating RealtimeKit's UI Kit in your React project. You can simply import the package from rtksdk/react-web-core, which is a hooks wrapper on rtksdk/web-core.

This page lists all the built-in Hooks in RealtimeKit.

• <RealtimeKitProvider />
• useRealtimeKitMeeting()
• useRealtimeKitSelector()

<RealtimeKitProvider />

It is a simple context provider providing the meeting object to child components.

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react';

function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({
      authToken: '<auth-token>',
      // set default values for user media
      defaults: {
        audio: false,
        video: true,
      },
    });
  }, []);

  return (
    <RealtimeKitProvider value={meeting}>
      <Meeting />
    </RealtimeKitProvider>
  );
}

And to consume the context value, we provide two more hooks, each serving a specific purpose.

These are:

• useRealtimeKitMeeting()
• useRealtimeKitSelector()

useRealtimeKitMeeting()

This hook essentially returns the meeting object you passed to the RealtimeKitProvider.

The value returned doesn't re-render always whenever properties inside the object change.

import { useRealtimeKitSelector, useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';

function Meeting() {
  const { meeting } = useRealtimeKitMeeting();

  /*
    use join() method or the setup screen component
    to actually enter the meeting
  */
  useEffect(() => {
    meeting.join();
  }, [meeting]);

  // show RtkMeeting
  return <RtkMeeting meeting={meeting} />;
}

useRealtimeKitSelector()

If you're familiar with Redux's useSelector hook, this hook works in a similar way.

It allows you to extract data from the meeting object using a selector function.

This hook will only cause a re-render when the actual data you returned for changes.

Here is how you can get all the joined participants data:

const joinedParticipants = useRealtimeKitSelector(
  (meeting) => meeting.participants.joined,
);

Refer to core documentation for reference on the various properties of the meeting object.

Example

import React from 'react';
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react';
import { RtkGrid, RtkButton } from '@cloudflare/realtimekit-react-ui';

function Meeting() {
  const { meeting } = useRealtimeKitMeeting();
  const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);

  if (!roomJoined) {
    return (
      <div>
        <p>You haven't joined the room yet.</p>
        <RtkButton onClick={() => meeting.joinRoom()}>Join Room</RtkButton>
      </div>
    );
  }

  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <RtkGrid meeting={meeting} />
    </div>
  );
}

export default Meeting;