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 }
/>
JitsiMeeting
componentdomain
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 }
/>
JaasMeeting
componentappId
Required. Provides an isolated context and prefixes the room name.
useStaging
Optional. Tells whether to use the staging environment or not.
roomName
Required. String used when joining the meeting.
getIFrameRef
Optional. Callback to retrieve the parent node of the IFrame for more control (e.g. styling).
<JitsiMeeting
...
getIFrameRef = { iframeRef => { iframeRef.style.height = '700px'; } }
/>
onApiReady
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) }
/>
onReadyToClose
Optional. Callback triggered when the meeting is ready to be closed.
<JitsiMeeting
...
onReadyToClose = { () => console.log('Jitsi Meet is ready to be closed') }
/>
configOverwrite
Optional. Object used for options overrides.
interfaceConfigOverwrite
Optional. Object used for more options overrides.
jwt
Optional. Token for authentication.
invitees
Optional. Participants list.
devices
Optional. Information regarding the devices used during the call.
userInfo
Optional. Details about the participant that started the meeting.
lang
Optional. The default meeting language.
release
Optional. Information regarding the stage.8x8.vc
or 8x8.vc
release version. Expects the following format: release-1234
.
spinner
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