Skip to content

usePointerLock ​

Hook that provides reactive pointer lock

sensors
test coverage
Last changed: last month

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 ​

Source • Demo

Contributors ​

D
debabin
debabin
B
babin
babin
V
VLADISLAW9
VLADISLAW9

Released under the MIT License.