Skip to main content

Embedding in React

The embedding instructions for capabilities always look something like this:

<script src="https://portal.transitiverobotics.com/running/@transitive-robotics/capability-name/dist/capability-name-device.js?userId=user123&deviceId=d_bot123"></script>
<capability-name-device id="user123" jwt="[JWT]" host="transitiverobotics.com" ssl="true" />

but when using React, you may wonder how to dynamically load that script, because React does not correctly interpret script tags in components.

The recommended solution is to dynamically add the script tag to your document head at run-time. You can follow this example:

import { useEffect } from 'react';

/** ensure the named web component is loaded; if not, it is loaded assuming
  the .js file it is defined in has the same name as the component itself */
export const ensureWebComponentIsLoaded = (capability, name, userId, deviceId) => {
  useEffect(() => {
      if (userId && deviceId && !customElements.get(name)) {
        const host = 'https://portal.transitiverobotics.com';
        const script = document.createElement('script');
        const params = `userId=${userId}&deviceId=${deviceId}`;
        script.setAttribute('src',
          `${host}/running/${capability}/dist/${name}.js?${params}`);
        document.head.appendChild(script);
      }
    }, [capability, name, userId, deviceId]);
};

In this function:

  • capability is the name of the capability you want to embed, e.g., @transitive-robotics/webrtc-video.
  • name is the name of the web component in that capability, e.g., webrtc-video-device, or configuration-management-fleet.
  • userId is your user Id on portal.transitiverobotics.com.
  • deviceId is the Id of the device for which you want to load the component.