usePointerLock

v0.0.15testeddemo

Reactive [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API). Locks the mouse cursor to an element and tracks the locked element reactively.

Source Tests

Examples

const el = useTemplateRef<HTMLElement>('el');
const { lock, unlock, element } = usePointerLock(el);
// lock on user gesture
function onClick() { lock(el); }

// lock the element that received the event
const { lock } = usePointerLock();
function onDblClick(e: MouseEvent) { lock(e); }

Demo

Loading demo…

Signature

export function usePointerLock(
  target?: MaybeComputedElementRef,
  options: UsePointerLockOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`?	`any`	—	Optional default element to lock when `lock` receives an `Event`
`options`?	`UsePointerLockOptions`	`{}`	Options

Returns

UsePointerLockReturn`{ isSupported, element, triggerElement, lock, unlock }`