usePortalContainer
The DOM node to portal into so tokens still resolve.
Signature
ThemeProvider renders an anchor node inside its own themed subtree and publishes it through this hook. Portal into it instead of document.body to keep --m-* variables resolvable in floating content; a panel appended to body exists outside every provider and renders unstyled.
function usePortalContainer(): HTMLElement | null;Usage
import type { ReactNode } from "react";
import { usePortalContainer } from "@solarius/onset";
import { createPortal } from "react-dom";
function FloatingLayer({ children }: { children: ReactNode }) {
const container = usePortalContainer();
// Null on the first render, before the provider's anchor has mounted.
if (!container) return null;
return createPortal(children, container);
}