@react-three/xr/dist/guard/focus.js

VR/AR for react-three-fiber

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useXRSessionVisibilityState } from '../index.js';
/**
 * Guard that only **shows** its children by toggling their visibility based on whether the current session is visible or not.
 * Typically used to hide/show content when operating system overlays are showing
 *
 * @param props ‎
 * #### `children?` - `ReactNode` The ReactNode elements to conditionally show.
 */
export function ShowIfSessionVisible({ children }) {
    const state = useXRSessionVisibilityState();
    return _jsx("group", { visible: state == null || state === 'visible', children: children });
}
/**
 * Guard that only **renders** its children to the scene based on whether the current session is visible or not.
 * Typically used to hide/show content when operating system overlays are showing
 *
 * @param props ‎
 * #### `children?` - `ReactNode` The ReactNode elements to conditionally show.
 */
export function IfSessionVisible({ children }) {
    const state = useXRSessionVisibilityState();
    if (state != 'visible' && state != null) {
        return null;
    }
    return _jsx(_Fragment, { children: children });
}