https://github.com/metonym/svelte-focus-key

Svelte component and action to focus an element when pressing a key
https://github.com/metonym/svelte-focus-key

focus-input keydown slash-command svelte svelte-action svelte-component typescript

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/metonym/svelte-focus-key
• Owner: metonym
• License: mit
• Created: 2021-10-10T19:16:33.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-06-24T19:01:23.000Z (over 1 year ago)
• Last Synced: 2024-10-19T13:45:37.103Z (2 months ago)
• Topics: focus-input, keydown, slash-command, svelte, svelte-action, svelte-component, typescript
• Language: TypeScript
• Homepage: https://metonym.github.io/svelte-focus-key
• Size: 605 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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.

```svelte

  import FocusKey from "svelte-focus-key";

  let element;

```

### Custom focus key

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

```svelte

  import FocusKey from "svelte-focus-key";

  let textarea;

```

### Multiple focus keys

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

```svelte

  import FocusKey from "svelte-focus-key";

  let node;

```

### Combination of keys

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

```svelte

  import FocusKey from "svelte-focus-key";

  let element;

```

### Select text on focus

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

```svelte

  import FocusKey from "svelte-focus-key";

  let input;

```

### `focusKey` action

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

```svelte

  import { focusKey } from "svelte-focus-key";

```

## 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