react-pre-hooksusePointerLock
Toggle the pointer lock mode on a target element using this hook.
Parameters
- a
refobject of the target element.
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| isEnabled | Boolean | indicates whether the pointerlock mode is enabled on the target element or not. |
| isError | Unknown | indicates whether is there an error or not. |
| enter | Function | enter to pointer lock mode, and it can take some pointer lock options. |
| exit | Function | exit from the pointer lock mode . |
| toggle | Function | toggle between enter and exit, and it can take a boolean to force it. |
Example Usage
tsx
import { usePointerLock } from 'react-pre-hooks';
export default function Example() {
const pointerLock = usePointerLock();
return (
<main>
<div ref={pointerLock.ref} onClick={() => pointerLock.toggle()}>
Click to {pointerLock.isEnabled ? 'exit' : 'enter'}.
</div>
</main>
);
}import { usePointerLock } from 'react-pre-hooks';
export default function Example() {
const pointerLock = usePointerLock();
return (
<main>
<div ref={pointerLock.ref} onClick={() => pointerLock.toggle()}>
Click to {pointerLock.isEnabled ? 'exit' : 'enter'}.
</div>
</main>
);
}