Skip to main content

Basic Usage

Include Dyte's React component in your app

DyteMeeting is a React component that can be included in your React application to show the Dyte Meeting UI.

It has 3 mandatory and 2 optional properties. The mandatory ones are defined below along with their usage, and the optional ones can be found here in the advanced usage page.

Pass Client ID for verification

You need to pass a clientId prop to DyteMeeting to verify the participant's authToken against.

<DyteMeeting
clientId=`yourClientID`
>

Configure the meeting connection

You need to pass a meetingConfig prop to DyteMeeting to define which meeting should the client connect to and a couple of other setup parameters, out of which only authToken and roomName are mandatory.

<DyteMeeting
clientId=`yourClientID`
meetingConfig={{
roomName: `roomName`,
authToken: `authToken`
}}
>

Get meeting instance on successful creation

You need to pass an onInit prop to DyteMeeting to get reference to the meeting instance that is created. onInit expects a function which has a single param of type Meeting and is not expected to return anything. This Meeting reference can be used to take further actions and make customizations to the meeting.

<DyteMeeting
onInit={(meeting) => { }}
clientId=`yourClientID`
meetingConfig={{
roomName: `roomName`,
authToken: `authToken`
}}
>