Add Jitsi Meet to your React App
Tags: react, jitsi, tutorial
Published: 2020-06-24 06:16:58

## Step 1: Create a container for Jitsi
The Jitsi iframe needs a container element of a pre-defined height and width to render into.

```jsx
import React from "react";

const VideoConference = () => {
  const jitsiContainerId = "jitsi-container-id";

  return <div id={jitsiContainerId} style={{ height: 720, width: "100%" }} />;
};

export default VideoConference;
```

## Step 2: Load the Jitsi Meet API Library Script
Unfortunately, this isn't available as an NPM module, and so we're gonna have to go old-school here. We first create a `<script/>` element with its `src` pointing to the source of the API library. We then append this to the document's body. 

The script takes an `onload` callback, which runs once the script has been loaded and executed. In order to convert this into a promise, we pass it the resolve method of an empty promise.

```jsx
const VideoConference = () => {
  // const jitsiContainerId = ...
  
  const loadJitsiScript = () => {
    let resolveLoadJitsiScriptPromise = null;

    const loadJitsiScriptPromise = new Promise((resolve) => {
      resolveLoadJitsiScriptPromise = resolve;
    });

    const script = document.createElement("script");
    script.src = "https://meet.jit.si/external_api.js";
    script.async = true;
    script.onload = resolveLoadJitsiScriptPromise
    document.body.appendChild(script);

    return loadJitsiScriptPromise;
  };

  // return ( ... )
};
```

Let me know in the comments if you have a more elegant way of promise-ifying the script loading part! 😄

## Step 3: Load the Jitsi IFrame
Once the script is loaded, it adds a class named `JitsiMeetExternalAPI` to the global `window` object. Instantiating this class loads the Jitsi iframe and returns an API object, which we can later be used to customise and control the Jitsi interface.
```jsx
const VideoConference = () => {
  // const jitsiContainerId = ...
  const [jitsi, setJitsi] = React.useState({});

  // const loadJitsiScript = () => { ... }

  const initialiseJitsi = async () => {
    if (!window.JitsiMeetExternalAPI) {
      await loadJitsiScript();
    }

    const _jitsi = new window.JitsiMeetExternalAPI("meet.jit.si", {
      parentNode: document.getElementById(jitsiContainerId),
    });

    setJitsi(_jitsi)
  };

  React.useEffect(() => {
    initialiseJitsi();

    return () => jitsi?.dispose?.();
  }, []);

  // return ( ... )
};
```
Our `initialiseJitsi` function is called only once when the component is first rendered, and Jitsi's `dispose()` method is called when the component is destroyed.

## Good!
This should give you a barebones setup. [Here's a CodeSandbox with what we've done so far.](https://codesandbox.io/s/react-jitsi-demo-qjoei?module=%2Fsrc%2FVideoConference.jsx)

## Configure Jitsi
There are quite a few options to configure your Jitsi iframe. For example, if you are rolling your own Jitsi server, you can specify its URL endpoint instead of `meet.jit.si`. The object from instantiating `JitsiMeetExternalAPI` also provides quite a few methods and event listeners to configure and control the Jitsi interface. [Check out Jitsi's docs for all the options, methods and events available.](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe)