Add support for rendering React components in legacy views

Add name to Contributors

CONTRIBUTORS.md

@@ -100,6 +100,7 @@
 - [StableCrimson](https://github.com/StableCrimson)
 - [diegoeche](https://github.com/diegoeche)
 - [Free O'Toole](https://github.com/freeotoole)
+- [TheBosZ](https://github.com/thebosz)
 
 ## Emby Contributors
 

src/utils/reactUtils.tsx

@@ -0,0 +1,41 @@
+import { createRoot } from 'react-dom/client';
+import * as React from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ApiProvider } from 'hooks/useApi';
+import { UserSettingsProvider } from 'hooks/useUserSettings';
+import { WebConfigProvider } from 'hooks/useWebConfig';
+import { queryClient } from 'utils/query/queryClient';
+import { useUserTheme } from 'hooks/useUserTheme';
+import { ThemeProvider } from '@mui/material/styles';
+import { getTheme } from 'themes/themes';
+
+export const attachReactElement = (Element: (props: object) => React.ReactNode, props: object, element: HTMLElement, replace = false) => {
+    const domNode = document.createElement('div');
+    const root = createRoot(replace ? domNode : element);
+    root.render(
+        <RootContext>
+            <Element {...props} />
+        </RootContext>
+    );
+
+    if (replace) {
+        element.replaceWith(domNode);
+    }
+};
+
+const RootContext: React.FC<React.PropsWithChildren> = ({ children }) => {
+    const { theme } = useUserTheme();
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ApiProvider>
+                <UserSettingsProvider>
+                    <WebConfigProvider>
+                        <ThemeProvider theme={getTheme(theme)}>
+                            {children}
+                        </ThemeProvider>
+                    </WebConfigProvider>
+                </UserSettingsProvider>
+            </ApiProvider>
+        </QueryClientProvider>
+    );
+};