Using Web Core Hooks

For a seamless developer experience when integrating UI Kit in your React project, we also have a package @dytesdk/react-web-core which is a hooks wrapper on @dytesdk/web-core.

While the Quickstart example uses the useDyteClient hook internally, here is a more complete example:

<DyteProvider />

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

import { useDyteClient } from '@dytesdk/react-web-core';

function App() {
  const [client, initClient] = useDyteClient();

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

  return (
    <DyteProvider value={client}>
      <Meeting />
    </DyteProvider>
  );
}

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

These are:

• useDyteMeeting()
• useDyteSelector()

useDyteMeeting()

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

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

import { useDyteSelector, useDyteMeeting } from '@dytesdk/';

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

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

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

useDyteSelector()

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 = useDyteSelector(
  (meeting) => meeting.participants.joined
);

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

Example

import React from 'react';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { DyteGrid, DyteButton } from '@dytesdk/react-ui-kit';

function Meeting() {
  const { meeting } = useDyteMeeting();
  const roomJoined = useDyteSelector((m) => m.self.roomJoined);

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

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

export default Meeting;