The Jitsi Meet React SDK provides the same user experience as the Jitsi Meet app, in a customizable way which you can embed in your apps.

npm install @jitsi/react-sdk

This library exposes two components with similar properties, intended for different use-cases.

To be used with custom domains as-it-is in React projects:

<JitsiMeeting
    domain = { YOUR_DOMAIN }
    roomName = { YOUR_ROOM_NAME }
/>

Optional. Field used to retrieve the external_api.js file that initializes the IFrame. If omitted, defaults to meet.jit.si.

To be used with the 8x8.vc domain as-it-is in React projects:

<JaaSMeeting
    appId = { YOUR_APP_ID }
    roomName = { YOUR_ROOM_NAME }
/>

...or with the stage.8x8.vc domain:

<JaaSMeeting
    appId = { YOUR_APP_ID }
    roomName = { YOUR_ROOM_NAME }
    useStaging = { true }
/>

Required. Provides an isolated context and prefixes the room name.

Optional. Tells whether to use the staging environment or not.

Required. String used when joining the meeting.

Optional. Callback to retrieve the parent node of the IFrame for more control (e.g. styling).

<JitsiMeeting
    ...
    getIFrameRef = { iframeRef => { iframeRef.style.height = '700px'; } }
/>

Optional. Callback triggered when the external API is loaded to expose it for events and commands.

<JitsiMeeting
    ...
    onApiReady = { externalApi => console.log('Jitsi Meet External API', externalApi) }
/>

Optional. Callback triggered when the meeting is ready to be closed.

<JitsiMeeting
    ...
    onReadyToClose = { () => console.log('Jitsi Meet is ready to be closed') }
/>

Optional. Object used for options overrides.

Optional. Object used for more options overrides.

Optional. Token for authentication.

Optional. Participants list.

Optional. Information regarding the devices used during the call.

Optional. Details about the participant that started the meeting.

Optional. Custom loading view while the IFrame is loading.

Install and run the project from the example directory to see the JitsiMeeting module in action.

npm run demo