Package Exports

svelte-focus-key

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-focus-key) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-focus-key

Svelte component and action to focus an element when pressing a key

The primary use case for this utility is to focus a search input when pressing the "/" key.

Installation

Yarn

yarn add -D svelte-focus-key

NPM

npm i -D svelte-focus-key

Usage

Basic

Use the bind:this directive to pass the element to focus to the FocusKey component.

<script>
  import FocusKey from "svelte-focus-key";

  let element;
</script>

<input bind:this={element} placeholder={'Press "/" to focus'} />

<FocusKey {element} />

Custom focus key

The default focus key is the forward slash (/). Customize the key using the key prop.

<script>
  let element2;
</script>

<input bind:this={element2} placeholder={'Press "s" to focus'} />

<FocusKey element={element2} key="s" />

focusKey action

This utility is also available as a Svelte action.

<script>
  import { focusKey } from "svelte-focus-key";
</script>

<input use:focusKey={{ key: "k" }} placeholder={'Press "k" to focus'} />

API

Props

Prop name	Type	Default value
element	`HTMLElement`	`null`
key	`string`	`"/"`

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