@react-three/xr/dist/input.js

VR/AR for react-three-fiber

import { bindXRInputSourceEvent, } from '@pmndrs/xr/internals';
import { useContext, useEffect } from 'react';
import { xrInputSourceStateContext } from './contexts.js';
import { useXR } from './xr.js';
export function useXRInputSourceStates() {
    return useXR((xr) => xr.inputSourceStates);
}
export function useXRInputSourceState(type, handedness) {
    return useXR((s) => s.inputSourceStates.find((state) => state.type === type && (handedness == null || state.inputSource.handedness === handedness)));
}
export function useXRInputSourceStateContext(type) {
    const state = useContext(xrInputSourceStateContext);
    if (state == null) {
        throw new Error(`useXRInputSourceStateContext() can only be used inside the xr store config`);
    }
    if (type != null && state.type != type) {
        throw new Error(`useXRInputSourceStateContext(${type}) can not be used inside a component for input type "${state.type}"`);
    }
    return state;
}
/**
 * Hook for listening to xr input source events
 * @param inputSource The input source to listen to, or 'all' to listen to all input sources
 * @param event The event to listen to. ([List of events](https://developer.mozilla.org/en-US/docs/Web/API/XRInputSourceEvent))
 * @param fn Callback function called when the event is triggered.
 * @param deps Retriggers the binding of the event when the dependencies change.
 */
export function useXRInputSourceEvent(inputSource, event, fn, deps) {
    const session = useXR((xr) => xr.session);
    useEffect(() => {
        if (session == null || inputSource == null) {
            return;
        }
        return bindXRInputSourceEvent(session, inputSource, event, fn);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [event, inputSource, session, ...deps]);
}