Use RealtimeKit Core Hooks

RealtimeKit's RealtimeKit UI 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 native project. You can simply import the package from @cloudflare/realtimekit-react-native.

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

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

<RealtimeKitProvider />

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

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

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

  useEffect(() => {
    const init = async () => {
      initMeeting({
        authToken: '<auth-token>',
        defaults: {
          audio: true,
          video: true,
        },
      });
    };
    init();
  }, []);

  return (
    <RealtimeKitProvider value={meeting}>
      {/* Render your component */}
      <MyComponent />
    </RealtimeKitProvider>
  );
}

<RtkUIProvider />

It is a simple context provider providing the RealtimeKit design system to child components.

import { useRealtimeKitClient } from '@cloudflare/realtimekit-react-native';
import { RtkUIProvider, RtkMeeting } from '@cloudflare/realtimekit-react-native-ui';

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

  useEffect(() => {
    const init = async () => {
      initMeeting({
        authToken: '<auth-token>',
        defaults: {
          audio: true,
          video: true,
        },
      });
    };
    init();
  }, []);

  return (
    <RealtimeKitProvider value={meeting}>
      <RtkUIProvider>
        <RtkMeeting meeting={meeting} />
      </RtkUIProvider>
    </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-native';
import { RtkMeeting, RtkText } from '@cloudflare/realtimekit-react-native-ui';

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

  /*
    use joinRoom() method or the setup screen component
    to actually enter the meeting
  */
  useEffect(() => {
    const join = async () => {
      if(!meeting.self.roomJoined)
        await meeting.joinRoom();
    };
    join();
  }, [meeting]);

  if(!meeting.self.roomJoined) {
    return <RtkText>Loading...</RtkText>
  }
  // 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 { View } from 'react-native';
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react-native';
import { RtkButton, RtkGrid, RtkText } from '@cloudflare/realtimekit-react-native-ui';

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

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

  return <RtkGrid meeting={meeting} />;
}

export default Meeting;