Jitsi React - Code snippets for tutorial - https://dev.to/gugadev/making-videoconferences-with-react-and-jitsi-4en1

a.tsx

import React, { useState } from "react";

const JitsiMeet = () => {
  const [jitsi, setJitsi] = useState<JitsiInstance | null>(null);
  
  return null;
}

b.tsx

import React, { useState } from "react";

const JitsiMeet = () => {
  const initialize = async () => {
    const await loadScript("https://meet.jit.si/external_api.js", true);
  };

  useEffect(() => initialize(), []);
  
  return null;
}

c.ts

export function loadScript(url: string, async?: boolean): Promise<void> {
  let resolver: any = null;

  const onloadPromise = new Promise((resolve) => {
    resolver = resolve;
  });

  const script = document.createElement("script");
  script.src = url;
  if (async) {
    script.async = true;
  }
  script.onload = () => resolver();
  document.body.appendChild(script);

  return onloadPromise as Promise<void>;
}

d.tsx

import React, { useState } from "react";

const JitsiMeet = ({ roomName, displayName }) => {
  const [jitsi, setJitsi] = useState<JitsiInstance | null>(null);
  
  const initialize = async () => {
    const await loadScript("https://meet.jit.si/external_api.js", true);
  };
  
  const createMeet = () => {
    return new window.JitsiMeetExternalAPI("meet.jit.si", {
      parentNode: document.getElementById("jitsi-root"),
      roomName,
      userInfo: {
        displayName
      },
      interfaceConfigOverwrite: {
        SHOW_JITSI_WATERMARK: false,
        SHOW_WATERMARK_FOR_GUESTS: false,
        SHOW_CHROME_EXTENSION_BANNER: false,
        SHOW_POWERED_BY: false,
      },
      configOverwrite: {
        disableSimulcast: false,
      },
    });
  };

  useEffect(() => initialize(), []);
  
  return return <div id="jitsi-root" />;
}

e.tsx

import React, { useState } from "react";

const JitsiMeet = ({ roomName, displayName }) => {
  const [jitsi, setJitsi] = useState<JitsiInstance | null>(null);
  
  const initialize = async () => {
    await loadScript("https://meet.jit.si/external_api.js", true);
    setJitsi(createMeet()); 
  };
    
  const destroy = () => {
    jitsi?.dispose();  
  }
    
  const createMeet = () => {
    return new window.JitsiMeetExternalAPI("meet.jit.si", {
      parentNode: document.getElementById("jitsi-root"),
      roomName,
      userInfo: {
        displayName
      },
      interfaceConfigOverwrite: {
        SHOW_JITSI_WATERMARK: false,
        SHOW_WATERMARK_FOR_GUESTS: false,
        SHOW_CHROME_EXTENSION_BANNER: false,
        SHOW_POWERED_BY: false,
      },
      configOverwrite: {
        disableSimulcast: false,
      },
    });
  };

  useEffect(() => {
    initialize();
    return () => destroy();
  }, []);
  
  return return <div id="jitsi-root" />;
}