@dytesdk/react-web-core

Dyte Web Core - React

A SDK that provides Dyte's core functionality, in React.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• About

About The Project

The core SDK provides Dyte's core functionality, while letting a developer build a custom UI over it.

Built With

• Dyte
• Typescript

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• npm

Installation

npm install @dytesdk/react-web-core

Usage

First, start by initializing a DyteClient instance with the useDyteClient() hook.

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

const App = () => {
  const [client, loadClient] = useDyteClient();

  useEffect(() => {}, []);

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

Now you can use the useDyteMeeting and useDyteSelector hooks as you would like:

import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';

const Meeting = () => {
  // in case you want to use the whole meeting object
  const meeting = useDyteMeeting();

  // in case you just want to use a `slice` of a meeting object
  // these are optimized so that re-renders only occur when the selected slice changes
  const messages = useDyteSelector((meeting) => meeting.chat.messages);
  const activeParticipants = useDyteSelector(
    (meeting) => meeting.participants.active
  );

  return <div>{/* render your UI */}</div>;
};

About

react-web-core 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.