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 is to focus a search input when pressing the forward slash key ("/").

Installation

Yarn

yarn add -D svelte-focus-key

NPM

npm i -D svelte-focus-key

pnpm

pnpm 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>
  import FocusKey from "svelte-focus-key";

  let textarea;
</script>

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

<FocusKey element={textarea} 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