# svelte-focus-key

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

Latest version **1.0.0** (published 2023-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-focus-key
pnpm add svelte-focus-key
yarn add svelte-focus-key
bun add svelte-focus-key
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-06-24 |
| First published | 2021-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Eric Liu |
| Maintainers | metonym |
| Keywords | svelte, svelte component, svelte action, keydown, focus, search |

## Links

- npm: https://www.npmjs.com/package/svelte-focus-key
- Repository: https://github.com/metonym/svelte-focus-key
- Issues: https://github.com/metonym/svelte-focus-key/issues
- npm.io page: https://npm.io/package/svelte-focus-key

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-06-24
- 0.3.2 — 2022-02-12
- 0.3.1 — 2022-02-08
- 0.3.0 — 2022-01-25
- 0.2.4 — 2021-12-15
- 0.2.3 — 2021-12-14
- 0.2.2 — 2021-12-14
- 0.2.1 — 2021-12-14
- 0.2.0 — 2021-11-30
- 0.1.1 — 2021-10-31
- 0.1.0 — 2021-10-10

## README

# svelte-focus-key

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

> 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

```bash
# Yarn
yarn add -D svelte-focus-key

# NPM
npm i -D svelte-focus-key

# pnpm
pnpm i -D svelte-focus-key
```

## Usage

### `FocusKey` component

Use the [bind:this](https://svelte.dev/docs#bind_element) directive to pass the element to focus to the `FocusKey` component.

<!-- example-start demo/Basic.svelte -->

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

  let element;
</script>

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

<FocusKey {element} />
```

<!-- example-end -->

### Custom focus key

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

<!-- example-start demo/CustomFocusKey.svelte -->

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

  let textarea;
</script>

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

<FocusKey element={textarea} key="s" />
```

<!-- example-end -->

### Multiple focus keys

The `key` prop can also accept an array of keys.

<!-- example-start demo/MultipleFocusKeys.svelte -->

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

  let node;
</script>

<input bind:this={node} placeholder={'Press "a" or "b"'} />

<FocusKey element={node} key={["a", "b"]} />
```

<!-- example-end -->

### Combination of keys

A combination of keys should be separated by a `+`.

<!-- example-start demo/ComboKeys.svelte -->

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

  let element;
</script>

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

<FocusKey {element} key="Meta+k" />
```

<!-- example-end -->

### Select text on focus

Set `selectText` to `true` to select the text in the element when focusing.

<!-- example-start demo/SelectTextOnFocus.svelte -->

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

  let input;
</script>

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

<FocusKey element={input} key="e" selectText />
```

<!-- example-end -->

### `focusKey` action

This utility also provides a [Svelte action](https://svelte.dev/docs#use_action).

<!-- example-start demo/FocusKeyAction.svelte -->

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

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

<!-- example-end -->

## API

### Props

| Name       | Description                       | Type                   | Default value |
| :--------- | :-------------------------------- | :--------------------- | :------------ |
| element    | HTML element to focus             | `HTMLElement`          | `null`        |
| key        | Key to trigger focus when pressed | `string` or `string[]` | `"/"`         |
| selectText | Select element text when focusing | `boolean`              | `false`       |

The `focusKey` action has the same props as `FocusKey` except for `element`.

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

---
_Source: https://npm.io/package/svelte-focus-key · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._