@dytesdk/react-ui-kit

React UI Kit by dyte

A set of UI components to truly customize your meeting UI, in React
Explore the docs »

Report Bug · Request Feature

Table of Contents

• Getting Started
• Usage
• About

Getting Started

There are separate UI Kit packages for VanillaJS and Angular. Check out the links to the packages below

UI Kit · Angular UI Kit

First, you will need to install the ui-kit along with the react-web-core package:

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

The react-web-core package is the package which handles all the low level logic required for a meeting by interating with our servers. Use it to create a meeting object, which you can pass along to the UI Kit components.

react-web-core consists of hooks written on top of web-core which make it easy to use web-core in react applications.

Usage

Use the useDyteClient() hook to initialize a client

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

  useEffect(() => {
    initClient({
      authToken: '<auth-token>',
      roomName: '<room-name>',
      defaults: {
        audio: true,
        video: true,
      },
    });
  }, []);

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

About

react-ui-kit is created & maintained by Dyte, Inc. You can find us on Twitter - @dyte_io or write to us at dev [at] dyte.io.

The names and logos for Dyte are trademarks of Dyte, Inc.

We love open source software! See our other projects and our products.