javascript – ReactJS – Mount custom react component into DOM

I’m trying to create a library that any frontend app can include and on calling the boot method I want to attach my custom button into the UI (kinda like the Intercom button www.intercom.com).

I define a namespace that I add to the window like so:

import MyButton from "./MyButton"

declare global {
    interface Window {
        MyClient: {
            boot: () => void;
        };
    }
}

export namespace MyClient {
    export const boot = () => {
        const container = document.getElementById('app');
        if (container) {
           // TODO: how can I mount MyButton?
        }
    };
}

window.MyClient = MyClient || {};

I am using vite+rollupJS to bundle my code into a library that eventually gets included like so in the client’s frontend app:

<script src="/dist/my-client-lib.js"></script>

and later in his scripts

window.MyClient.boot();