Split codebase (#455)

packages/ui/src/hooks/usePortal.ts

@@ -0,0 +1,26 @@
+import { useRef } from "react";
+
+const PORTAL_CONTAINER_ID = "react-portal";
+
+export function usePortal(name: string) {
+  const ref = useRef(getOrCreatePortal(name));
+  return ref.current;
+}
+
+function getOrCreatePortal(name: string) {
+  let portalContainer = document.getElementById(PORTAL_CONTAINER_ID);
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = PORTAL_CONTAINER_ID;
+    document.body.appendChild(portalContainer);
+  }
+
+  let existing = portalContainer.querySelector(`:scope > [data-portal-name="${name}"]`);
+  if (!existing) {
+    const el = document.createElement("div");
+    el.setAttribute("data-portal-name", name);
+    portalContainer.appendChild(el);
+    existing = el;
+  }
+  return existing;
+}