AwesomePlugin.ts

import { Plugin } from './Plugin';

export class AwesomePlugin implements Plugin {
    render(element: HTMLDivElement): void {
        console.log('rendered plugin');
        element.innerText ='XYZXYZ';
    }

    extensionId: string = 'blah';
}

Plugin.ts

export interface Plugin {
    render(element: HTMLDivElement): void
    extensionId: string
}

PluginRenderer.tsx

import * as React from 'react';
import { PluginStore } from './PluginStore';

export interface Props<T> {
    extensionId: string
    props: T
}

export class PluginRenderer<T> extends React.Component<Props<T>> {
    render() {
        const pluginStore = PluginStore.getInstance();

        return <div>
            {pluginStore.getPlugins(this.props.extensionId).map(plugin => {
                return <div ref={(element) => element && plugin.render(element, this.props.props)}></div>
            })}
        </div>
    }
}

PluginStore.ts

import { Plugin } from './Plugin'

declare global {
    interface Window {
        pluginStore: PluginStore;
    }
}
export class PluginStore {
    private plugins: Map<string, Plugin[]> = new Map<string, Plugin[]>();

    register(plugin: Plugin): void {
        const plugins = this.plugins.get(plugin.extensionId) || []
        plugins.push(plugin);
        this.plugins.set(plugin.extensionId, plugins);
    }

    getPlugins(extensionId: string): Plugin[] {
        return this.plugins.get(extensionId) || [];
    }

    static getInstance() {
        if(!window.pluginStore) {
            window.pluginStore = new PluginStore;
        }

        return window.pluginStore;
    }
}