svelte-keydown

[![NPM][npm]][npm-url]

> Utility to listen for keyboard events.

Utility component leveraging the svelte:body API to listen for keydown events.

Try it in the Svelte REPL.

Use Cases

- toggle modals
- capture a combination of keys (i.e., "Meta-s")

---

Installation

Yarn

``bash
yarn add -D svelte-keydown
`

NPM

`bash
npm i -D svelte-keydown
`

pnpm

`bash
pnpm i -D svelte-keydown
`

Usage

$3

`svelte


on:Enter={() => {
events = [...events, "enter"];
}}
/>

Press "enter": {events.join(", ")}
`

$3

Set pauseOnInput to prevent the utility from capturing keydown events on input events.

`svelte


pauseOnInput
on:key={(e) => {
evt = [...evt, e.detail];
}}
/>

{evt.join("")}
`

$3

This component forward the on:keyup and on:keydown events.

You can use on:keydown to prevent the default behavior for certain keys.

In the following example, pressing "Space" should not cause the browser page to scroll.

`svelte
on:keydown={(e) => {
if (e.key === " ") e.preventDefault();
}}
on:Space={(e) => {
console.log("key", "Space");
}}
/>
`

Examples

$3

In this use case, keydown events are paused if the modal is not open.

`svelte


(showModal = false)} />

(showModal = !showModal)}>Toggled? {showModal}
`

$3

Use the combo dispatched event to listen for a combination of keys.

`svelte


(combo = [...combo, e.detail])} />

{combo.join(", ")}
`

#### separator

Use the separator property to customize the separating key between multiple keys.

`svelte


(combo = [...combo, e.detail])} />

{combo.join(", ")}
`

API

| Prop | Type | Default value |
| :----------- | :-------- | :------------ |
| paused | boolean | false |
| pauseOnInput | boolean | false |
| separator | string | - |

$3

- on:keyup
- on:keydown

$3

#### on:[Key]

Example:

`svelte no-eval



`

#### on:key

Alternative API to on:[Key].

Example:

`svelte


(keys = [...keys, detail])} />

{JSON.stringify(keys, null, 2)}


`

#### on:combo

Triggered when a sequence of keys are pressed and cleared when a keyup event is fired.

Examples:

- "Shift-S"
- "Meta-c" (Copy)
- "Meta-v" (Paste)

`svelte


(combos = [...combos, detail])} />

{JSON.stringify(combos, null, 2)}


``

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

CHANGELOG.md

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-keydown.svg?color=%23ff3e00&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-keydown