React

Quickstart

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

Dyte also offers the flexibility to build your own UI using various individual components. This offers limitless customization options to tailor the UI to fit your requirements. For more information, see the Build your own UI section.

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.

Objective

You'll learn how to:

• Install the Dyte client-side SDKs
• Initialize Dyte client
• Bringing up your UI
• Go live!

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.

react-web-core consists of hooks written on top of our 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

Import Errors

If you get errors when importing the react-web-core and react-ui-kit packages, try installing them separately.

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>
  );
}