@react-three/xr/dist/deprecated/button.js

VR/AR for react-three-fiber

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { useStore } from 'zustand';
import { useXRSessionModeSupported } from '../hooks.js';
/**
 * @deprecated use `<button onClick={() => store.enterXR()}>` instead
 */
export const XRButton = forwardRef(({ store, mode, onError, children, ...props }, ref) => {
    const session = useStore(store, (xr) => xr.session);
    const supported = useXRSessionModeSupported(mode, onError);
    return (_jsx("button", { ref: ref, ...props, onClick: () => (session != null ? session.end() : store.enterXR(mode).catch(onError)), children: typeof children === 'function'
            ? children(supported ? (session != null ? 'entered' : 'exited') : 'unsupported')
            : children }));
});
/**
 * @deprecated use `<button onClick={() => store.enterAR()}>` instead
 */
export const ARButton = forwardRef((props, ref) => {
    return _jsx(XRButton, { ref: ref, mode: "immersive-ar", ...props });
});
/**
 * @deprecated use `<button onClick={() => store.enterVR()}>` instead
 */
export const VRButton = forwardRef((props, ref) => {
    return _jsx(XRButton, { ref: ref, mode: "immersive-vr", ...props });
});