usePointerLock

Category

Sensors

Export Size

850 B

Last Changed

5 days ago

Reactive pointer lock

Demo

Basic Usage

import { usePointerLock } from '@reause/core'

const targetRef = useRef<HTMLDivElement>(null)
const { isSupported, element, triggerElement, lock, unlock } = usePointerLock()

// <div ref={targetRef} onMouseDown={lock} onMouseUp={unlock} />
// lock(targetRef) — lock a specific element or ref
// lock(event) — lock the event's currentTarget (hook-level target first, if set)
// element mirrors document.pointerLockElement while the lock is held

Type Declarations

export interface UsePointerLockOptions {
    document?: Document;
}

export interface UsePointerLockReturn {
    isSupported: boolean;
    element: Element | null;
    triggerElement: Element | null;
    lock: (e: ElementRef | Event | SyntheticEvent) => Promise<Element | null>;
    unlock: () => Promise<boolean>;
}

type ElementRef = RefObject<Element | null | undefined>

export function usePointerLock(target?: ElementRef, options?: UsePointerLockOptions): UsePointerLockReturn

Source

Source · Demo · VueUse

Contributors

Changelog

No recent changes