@videosdk.live/react-sdk/README.md

<h1 align="center"> <img src="https://static.videosdk.live/videosdk_logo_website_black.png"/><br/> <p align="center"> Video SDK React App<br/> <a href="https://videosdk.live/">videosdk.live</a> </p> </h1>

<h1 align="center">
  <img src="https://static.videosdk.live/videosdk_logo_website_black.png"/><br/>
<p align="center">
  Video SDK React App<br/>
  <a href="https://videosdk.live/">videosdk.live</a>
</p>
</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk"><img src="https://img.shields.io/npm/dw/@videosdk.live/react-sdk.svg?style=for-the-badge" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk"><img src="https://img.shields.io/npm/v/@videosdk.live/react-sdk/latest.svg?style=for-the-badge" alt="NPM latest version"></a>
   <a href="https://discord.gg/kgAvyxtTxv">
<img src="https://img.shields.io/discord/734858252939952248?logo=discord&style=for-the-badge" />
</a>
<a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fpublish.twitter.com%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Efollow%7Ctwgr%5Evideo_sdk&screen_name=video_sdk">
<img src="https://img.shields.io/twitter/follow/video_sdk?label=Twitter&logo=twitter&style=for-the-badge" />
</a>
<a href="http://youtube.com/videosdk?sub_confirmation=1">
<img src="https://img.shields.io/youtube/channel/subscribers/UCuY7JzXnpp874oa7uQbUwsA?logo=Youtube&style=for-the-badge" />
</a>
</p>

## Features

- Video API with real-time audio, video and data streams
- 5,000+ participants support
- Chat support with rich media.
- Screen sharing with HD and Full HD.
- Play realtime video in meeting
- Connect it with social media such as Facebook, Youtube etc (RTMP out support).
- Intelligent speaker switch
- Record your meetings on cloud
- Customise UI and built other rich features with our new data streams such as whiteboard, poll, Q & A etc.

## Browser Support

Visit our official guide for [Browser Support](https://docs.videosdk.live/docs/realtime-communication/see-also/device-browser-support)

## Demo App
Check out demo [here](https://demo.videosdk.live/conference-meeting/)

## Prerequisites

You must have the following installed:

- Node.js v12+
- NPM v6+ (comes installed with newer Node versions)

# Setup

`@videosdk.live/react-sdk` wraps up our [`@videosdk.live/js-sdk`](https://www.npmjs.com/package/@videosdk.live/js-sdk)
into usable hooks APIs. It simplifies code and concept for react-js

### Install the library in React

The easiest way to get started is by installing `@videosdk.live/react-sdk` in your app.

**From npm package**:
```js
npm install @videosdk.live/react-sdk
```

**From yarn package**:
```js
yarn add @videosdk.live/react-sdk
```

### Import the library in your app

`react-sdk` provides two most important hook `useMeeting` and `useParticipant`. it also provides `MeetingProvider` and `MeetingConsumer` to listen changes in meeting state and events.

```javascript title="Import the library"
import {
  MeetingProvider,
  useMeeting,
  useParticipant,
  MeetingConsumer,
} from "@videosdk.live/react-sdk";
```

## Documentation

Check the components and their usage in our [documentation](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/concept-and-architecture).

## Quick Start

Check the Quick Start guide to our [documentation](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/quick-start).


## Try it out

Run the [Code sample](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example) to see it in action.