@react-three/xr/dist/dom-overlay.js

VR/AR for react-three-fiber

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import tunnel from 'tunnel-rat';
import { useXR } from './xr.js';
/**
 * Renders html elements as an overlay for handheld AR experiences
 * @param props Props are forwarded to a `div` element
 * @function
 */
export const XRDomOverlay = forwardRef((props, ref) => {
    const domOverlayRoot = useXR((xr) => xr.domOverlayRoot);
    const { In, Out } = useMemo(tunnel, []);
    useEffect(() => {
        if (domOverlayRoot == null) {
            return;
        }
        const root = createRoot(domOverlayRoot);
        root.render(_jsx(Out, {}));
        return () => root.unmount();
    }, [domOverlayRoot, Out]);
    return (_jsx(In, { children: _jsx("div", { ...props, ref: ref }) }));
});