React

Quickstart

This quickstart shows how to use Dyte's Voice Conferencing in your React applications with a variety of meeting UI customization options.

Further down this guide we also explain how Dyte's UI component library can help to build your UI faster with components specially made for Live Video applications.

For getting started quickly, you can use our sample code. You can clone and run a sample application from the React UI Kit GitHub repository.

Before Getting Started

Make sure you've a mechanism to get authToken from your server-side, which you would have received as part of Add Participant call.

Step 1: Install Dyte SDK packages

To begin, install the following packages:

• @dytesdk/react-web-core: This core package powers video, voice, livestream, and chat SDKs. This is a required package.
• @dytesdk/ui-kit: This package includes Dyte UI components which can be used with core to easily build your own UI, including a prebuilt UI component. You can skip installing this package if you wish to build your own UI from scratch.

@dytesdk/react-web-core consists of hooks written on top of our @dytesdk/web-core package, which makes it easy to use web-core in React applications.

You can install the package using npm or Yarn.

npm install @dytesdk/react-web-core @dytesdk/react-ui-kit

Version

@dytesdk/react-web-core
@dytesdk/react-ui-kit

Step 2: Prepare meeting object

Here's a series of steps that you need to perform:

Initialize the Dyte client

• Use the useDyteClient() hook and initMeeting
• Provide the authToken that you fetched from your server-side

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

export default function Meeting({ authToken }) {
  const [meeting, initMeeting] = useDyteClient();

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

  return <></>; // TODO: render the UI
}

Set up DyteProvider

You need it to import the DyteProvider from the @dytesdk/react-web-core. DyteProvider basically is a hook wrapper on dytesdk/web-core. This provides a meeting object to child components.

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

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

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

  return (
    <DyteProvider value={meeting} fallback={<i>Loading...</i>}>
      {/* Render your UI here. Subcomponents can now use the `useDyteMeeting` and `useDyteSelector` hooks */}
    </DyteProvider>
  );
}

fallback can be used to add a loading indicator while the meeting is being initialized.

Step 3: Bring up the UI

The meeting object serves as the link between web-core and UI Kit, allowing them to communicate with one another. Once the UI Kit has the meeting object, it can join and leave meetings, and so on.

Create a MyMeeting component and render it within DyteProvider.

import { useEffect } from 'react';
import { useDyteClient, DyteProvider } from '@dytesdk/react-web-core';
import MyMeeting from './my-meeting';

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

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

  return (
    <DyteProvider value={meeting} fallback={<i>Loading...</i>}>
      {/* Render your UI here. Subcomponents can now use the `useDyteMeeting` and `useDyteSelector` hooks */}
      <MyMeeting />
    </DyteProvider>
  );
}

UI Kit

DyteMeeting renders the entire meeting UI. It loads your preset and renders the UI based on it. With this component, you don't have to handle all the states, dialogs, and other smaller bits of managing the application.

For more information on the other props of DyteMeeting, see DyteMeeting.

import { DyteMeeting } from '@dytesdk/react-ui-kit';
function MyMeeting() {
  const { meeting } = useDyteMeeting();

  return (
    <div style={{ height: '480px' }}>
      <DyteMeeting mode="fill" meeting={meeting} />
    </div>
  );
}

Build your own UI

If you require additional customizations, you can choose specific components and utilize the low-level APIs offered by our core SDK to construct the rest of the UI according to your specific needs.

import { DyteGrid, DyteMicToggle } from '@dytesdk/react-ui-kit';

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

  return (
    <div style={{ height: '480px' }}>
      <DyteGrid meeting={meeting} />
      <div className="controlbar">
        <DyteMicToggle meeting={meeting} />
      </div>
    </div>
  );
}