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 liran@lirantal.com