@terrygonguet/svelte-pointerlock

A very simple Svelte action to take over pointer management.

Installation

npm install @terrygonguet/svelte-pointerlock

Example

<script lang="ts">
    import { usePointerlock } from "$lib"

    const { pointerlock, enter, exit, toggle } = usePointerlock()

    function onClick() {
        toggle()
    }
</script>

<main use:pointerlock on:click="{onClick}">
    <p>Click to toggle pointer lock</p>
</main>

Usage

Call the usePointerlock function in your component and use: the pointerlock property of the returned object on the element you want to lock the pointer to. The enter, exit and toggle functions do what their names imply and return nothing, same as the underlying Pointerlock API.

API

function usePointerlock

function usePointerlock(): {
    pointerlock: Action
    enter(): void
    exit(): void
    toggle(): void
}