From a938650dedcda0cd296c3f7b74c881f31387973f Mon Sep 17 00:00:00 2001
From: Nathan Kerr <nathankerr@gmail.com>
Date: Tue, 6 May 2025 09:50:11 -0700
Subject: [PATCH] Add support for rendering React components in legacy views

Add name to Contributors
---
 CONTRIBUTORS.md          |  1 +
 src/utils/reactUtils.tsx | 41 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/utils/reactUtils.tsx

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 48b9b147b3..a7b3309715 100644
--- a/CONTRIBUTORS.md
+++ b/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
 
diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx
new file mode 100644
index 0000000000..097f185406
--- /dev/null
+++ b/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>
+    );
+};