@threlte/xr/dist/components/XRButton.svelte.d.ts

Tools to more easily create VR and AR experiences with Threlte

import type { HTMLButtonAttributes } from 'svelte/elements';
import type { Snippet } from 'svelte';
type SupportState = 'unsupported' | 'insecure' | 'blocked' | 'supported';
type Props = HTMLButtonAttributes & {
    /** The type of `XRSession` to create */
    mode: XRSessionMode;
    /**
     * `XRSession` configuration options
     * @see https://immersive-web.github.io/webxr/#feature-dependencies
     */
    sessionInit?: XRSessionInit & {
        domOverlay?: {
            root: HTMLElement;
        } | undefined;
    };
    /** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
    force?: 'enter' | 'exit';
    /** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
    styled?: boolean;
    children?: Snippet<[{
        state: SupportState;
    }]>;
    onclick?: (event: {
        state: SupportState;
        nativeEvent: MouseEvent;
    }) => void;
    onerror?: (error: Error) => void;
};
/**
 * `<XRButton />` is an HTML `<button />` that can be used to init and
 * display info about your WebXR session. This is aliased by `ARButton` and
 * `VRButton` with sensible session defaults.
 *
 * ```svelte
 * <XRButton
 *   mode={'immersive-ar' | 'immersive-vr' | 'inline'}
 *   sessionInit={{
 *     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
 *   }}
 *   force={'enter' | 'exit' | undefined}
 *   styled={'true' | 'false'}
 *   onerror={(event) => {}}
 *   onclick={(event) => {}}
 * />
 * ```
 */
declare const XrButton: import("svelte").Component<Props, {}, "">;
type XrButton = ReturnType<typeof XrButton>;
export default XrButton;