Use Web Core Hooks

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

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

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

• <DyteProvider />
• useDyteMeeting()
• useDyteSelector()

<DyteProvider />

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

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

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

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

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

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

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 join() method or the setup screen component
    to actually enter the meeting
  */
  useEffect(() => {
    meeting.join();
  }, [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;