Skip to main content

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;