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](#about-the-project)
- [Built With](#built-with)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [About](#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](https://dyte.io)
- [Typescript](https://typescriptlang.org)
## Getting Started
To get a local copy up and running follow these simple steps.
### Prerequisites
- npm
### Installation
```sh
npm install @dytesdk/react-web-core
```
## Usage
First, start by initializing a DyteClient instance with the `useDyteClient()` hook.
```tsx
import { useDyteClient, DyteProvider } from '@dytesdk/react-web-core';
const App = () => {
const [client, loadClient] = useDyteClient();
useEffect(() => {}, []);
return (
{/* Render your UI here. Subcomponents can now use the `useDyteMeeting` and `useDyteSelector` hooks */}
);
};
```
Now you can use the `useDyteMeeting` and `useDyteSelector` hooks as you would like:
```tsx
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 {/* render your UI */}
;
};
```
## About
`react-web-core` is created & maintained by Dyte, Inc. You can find us on Twitter - [@dyte_io](https://twitter.com/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](https://github.com/dyte-in) and [our products](https://dyte.io).