Remote Rendering: Shopify’s Take on Extensible UI - Using a `RemoteRenderer` to integrate with a React application

host.jsx

// Host
import {useMemo} from 'react';
import {createRemoteReceiver, RemoteRenderer, createController} from '@remote-ui/react/host';
import {Button, Card} from '../component-implementations';


const controller = createController({Button, Card});


export function Renderer() {
  const receiver = useMemo(() => createRemoteReceiver());

  // Run 3rd party script in a sandbox environment
  // with the receiver as a communication channel ...
  
  return <RemoteRenderer receiver={receiver} controller={controller} />;
}