Skip to content

usePointerLock

Hook that provides reactive pointer lock

browser
low
test coverage
Last changed: 7 months ago

TIP

This hook uses pointerLockElement browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library
CLI
Manual
typescript
import { usePointerLock } from '@siberiacancode/reactuse';

Usage

typescript
const { supported, lock, unlock, element } = usePointerLock();

Demo

Api

Returns

UsePointerLockReturn

Type declaration

typescript
import type { MouseEvent } from 'react';

interface UsePointerLockReturn {
  /** The pointer lock element */
  element?: Element;
  /** Whether the pointer lock is supported */
  supported: boolean;
  /** Lock the pointer lock */
  lock: (event: MouseEvent) => void;
  /** Unlock the pointer lock */
  unlock: () => boolean;
}

Source

SourceDemo

Contributors

D
debabin
debabin
B
babin
babin
V
VLADISLAW9
VLADISLAW9

Released under the MIT License.