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`
    }}
    >