React SDK

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.

info

React 16 or higher is required.

Sample application using the SDK

If you want to see how easy integrating the Jitsi Meet React SDK into a React application is, take a look at our example.

Installation

To access the React SDK modules in your application you need to install it as a dependency:

npm install @jitsi/react-sdk

Modules

The SDK exposes two components with similar properties, intended for different use-cases.

JitsiMeeting

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

<JitsiMeeting
    domain = { YOUR_DOMAIN }
    roomName = "PleaseUseAGoodRoomName"
    configOverwrite = {{
        startWithAudioMuted: true,
        disableModeratorIndicator: true,
        startScreenSharing: true,
        enableEmailInStats: false
    }}
    interfaceConfigOverwrite = {{
        DISABLE_JOIN_LEAVE_NOTIFICATIONS: true
    }}
    userInfo = {{
        displayName: 'YOUR_USERNAME'
    }}
    onApiReady = { (externalApi) => {
        // here you can attach custom event listeners to the Jitsi Meet External API
        // you can also store it locally to execute commands
    } }
    getIFrameRef = { (iframeRef) => { iframeRef.style.height = '400px'; } }
/>

Properties specific to the JitsiMeeting component

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

JaaSMeeting

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

<JaaSMeeting
    appId = { YOUR_APP_ID }
    roomName = "PleaseUseAGoodRoomName"
    jwt = { YOUR_VALID_JWT }
    configOverwrite = {{
        disableThirdPartyRequests: true,
        disableLocalVideoFlip: true,
        backgroundAlpha: 0.5
    }}
    interfaceConfigOverwrite = {{
        VIDEO_LAYOUT_FIT: 'nocrop',
        MOBILE_APP_PROMO: false,
        TILE_VIEW_MAX_COLUMNS: 4
    }}
    spinner = { SpinnerView }
    onApiReady = { (externalApi) => { ... } }
/>

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

<JaaSMeeting
    appId = { YOUR_APP_ID }
    roomName = "PleaseUseAGoodRoomName"
    ...
    useStaging = { true }
/>

Properties specific to the JaaSMeeting component

• appId: Required. Provides an isolated context and prefixes the room name.
• useStaging: Optional. Tells whether to use the staging environment or not.

Common properties

The component modules support a similar kind of customization to the Jitsi Meet IFrame. The following properties can be passed down to your instances of JitsiMeeting or JaaSMeeting.

• roomName: Required. The name of the room to join.

• configOverwrite: Optional. The JS object with overrides for options defined in the config.js file.

• interfaceConfigOverwrite: Optional. The JS object with overrides for options defined in the interface_config.js file.

• jwt: Optional. The JWT token.

• invitees: Optional. Object arrays that contain information about participants invited to a call.

• devices: Optional. Information map about the devices used in a call.

• userInfo: Optional. The JS object that contains information about the participant starting or joining the meeting (e.g., email).

• release: Optional. Information regarding the stage.8x8.vc or 8x8.vc release version. Expects the following format: release-1234.

• spinner: Optional. The custom spinner to be displayed while the IFrame is loading.

• onApiReady: Optional. The external API reference for events and commands.

• onReadyToClose: Optional. The callback for when the meeting is ready to be closed.

• getIFrameRef: Optional. The parent node used by the IFrame.