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