Astro Keyboard Controls

An Astro component that allows you to easily bind to specific keyboard keys and focus on a specific element based on a passed selector string.

Installation

npm install astro-keyboard-controls

Example

---
import KeyboardControls from 'astro-keyboard-controls';

---

<Layout {meta}>
	<KeyboardControls selector="div#search input" key="/" />
    <div id="search">
        <input type="text" />
    </div>
</Layout>

Available component props

| Name | Type | Example | Description | | ----------------- | --------------------------------- | ----------------------------- | -------------------------------------------------- | | selector | String | div#search input | A string specifying the selector that is passed to document.querySelector() | | site | String | / | The keyboard key to bind with an event listener for keydown |

Author

Liran Tal [email protected]