Portal

The Portal component is a React component that allows you to render a component in a different part of the DOM.

Code

import { useMemo, useSyncExternalStore } from "react";
import { createPortal } from "react-dom";

export function useHydrated() {
	return useSyncExternalStore(
		() => () => {},
		() => true,
		() => false
	);
}

export interface PortalProps {
	selector?: string;
	children: React.ReactNode;
}

export function Portal({ children, selector = "body" }: PortalProps) {
	const hydrated = useHydrated();

	const portal = useMemo(() => {
		if (!hydrated) return null;

		const el = document.querySelector(selector);

		if (!el) {
			throw new Error(`The selector "${selector}" did not match any elements`);
		}

		return createPortal(children, el);
	}, [selector, hydrated]);

	return <>{portal}</>;
}

Example