Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions docs/framework/solid/reference/functions/createHeldKeyCodes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
id: createHeldKeyCodes
title: createHeldKeyCodes
---

# Function: createHeldKeyCodes()

```ts
function createHeldKeyCodes(): () => Record<string, string>;
```

Defined in: [createHeldKeyCodes.ts:35](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHeldKeyCodes.ts#L35)

SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.

This is useful for debugging which physical key was pressed (e.g. distinguishing
left vs right Shift via "ShiftLeft" / "ShiftRight").

This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
to the global KeyStateTracker.

## Returns

Signal accessor for record mapping normalized key names to their `event.code` values

```ts
(): Record<string, string>;
```

### Returns

`Record`\<`string`, `string`\>

## Example

```tsx
function KeyDebugDisplay() {
const heldKeys = createHeldKeys()
const heldCodes = createHeldKeyCodes()

return (
<div>
<For each={heldKeys()}>
{(key) => (
<kbd>
{key} <small>{heldCodes()[key]}</small>
</kbd>
)}
</For>
</div>
)
}
```
44 changes: 44 additions & 0 deletions docs/framework/solid/reference/functions/createHeldKeys.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
id: createHeldKeys
title: createHeldKeys
---

# Function: createHeldKeys()

```ts
function createHeldKeys(): () => string[];
```

Defined in: [createHeldKeys.ts:26](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHeldKeys.ts#L26)

SolidJS primitive that returns a signal of currently held keyboard keys.

This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
to the global KeyStateTracker and updates whenever keys are pressed
or released.

## Returns

Signal accessor for array of currently held key names

```ts
(): string[];
```

### Returns

`string`[]

## Example

```tsx
function KeyDisplay() {
const heldKeys = createHeldKeys()

return (
<div>
Currently pressed: {heldKeys().join(' + ') || 'None'}
</div>
)
}
```
88 changes: 88 additions & 0 deletions docs/framework/solid/reference/functions/createHotkey.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
---
id: createHotkey
title: createHotkey
---

# Function: createHotkey()

```ts
function createHotkey(
hotkey,
callback,
options): void;
```

Defined in: [createHotkey.ts:83](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkey.ts#L83)

SolidJS primitive for registering a keyboard hotkey.

Uses the singleton HotkeyManager for efficient event handling.
The callback receives both the keyboard event and a context object
containing the hotkey string and parsed hotkey.

This primitive automatically tracks reactive dependencies and updates
the registration when options or the callback change.

## Parameters

### hotkey

The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)

`RegisterableHotkey` | () => `RegisterableHotkey`

### callback

`HotkeyCallback`

The function to call when the hotkey is pressed

### options

Options for the hotkey behavior

[`CreateHotkeyOptions`](../interfaces/CreateHotkeyOptions.md) | () => [`CreateHotkeyOptions`](../interfaces/CreateHotkeyOptions.md)

## Returns

`void`

## Examples

```tsx
function SaveButton() {
const [count, setCount] = createSignal(0)

// Callback always has access to latest count value
createHotkey('Mod+S', (event, { hotkey }) => {
console.log(`Save triggered, count is ${count()}`)
handleSave()
})

return <button onClick={() => setCount(c => c + 1)}>Count: {count()}</button>
}
```

```tsx
function Modal(props) {
// enabled option is reactive
createHotkey('Escape', () => {
props.onClose()
}, () => ({ enabled: props.isOpen }))

return <Show when={props.isOpen}>
<div class="modal">...</div>
</Show>
}
```

```tsx
function Editor() {
const [editorRef, setEditorRef] = createSignal<HTMLDivElement | null>(null)

// Scoped to a specific element - use accessor so hotkey waits for ref
createHotkey('Mod+S', save, () => ({ target: editorRef() }))

return <div ref={setEditorRef}>...</div>
}
```
64 changes: 64 additions & 0 deletions docs/framework/solid/reference/functions/createHotkeyRecorder.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
id: createHotkeyRecorder
title: createHotkeyRecorder
---

# Function: createHotkeyRecorder()

```ts
function createHotkeyRecorder(options): SolidHotkeyRecorder;
```

Defined in: [createHotkeyRecorder.ts:61](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeyRecorder.ts#L61)

SolidJS primitive for recording keyboard shortcuts.

This primitive provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
class, managing all the complexity of capturing keyboard events, converting them
to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
to clear.

This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
to the recorder's store state (same pattern as useHotkeyRecorder in React).

## Parameters

### options

Configuration options for the recorder (or accessor function)

`HotkeyRecorderOptions` | () => `HotkeyRecorderOptions`

## Returns

[`SolidHotkeyRecorder`](../interfaces/SolidHotkeyRecorder.md)

An object with recording state signals and control functions

## Example

```tsx
function ShortcutSettings() {
const [shortcut, setShortcut] = createSignal<Hotkey>('Mod+S')

const recorder = createHotkeyRecorder({
onRecord: (hotkey) => {
setShortcut(hotkey)
},
onCancel: () => {
console.log('Recording cancelled')
},
})

return (
<div>
<button onClick={recorder.startRecording}>
{recorder.isRecording() ? 'Recording...' : 'Edit Shortcut'}
</button>
<Show when={recorder.recordedHotkey()}>
<div>Recording: {recorder.recordedHotkey()}</div>
</Show>
</div>
)
}
```
67 changes: 67 additions & 0 deletions docs/framework/solid/reference/functions/createHotkeySequence.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
---
id: createHotkeySequence
title: createHotkeySequence
---

# Function: createHotkeySequence()

```ts
function createHotkeySequence(
sequence,
callback,
options): void;
```

Defined in: [createHotkeySequence.ts:50](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createHotkeySequence.ts#L50)

SolidJS primitive for registering a keyboard shortcut sequence (Vim-style).

This primitive allows you to register multi-key sequences like 'g g' or 'd d'
that trigger when the full sequence is pressed within a timeout.

## Parameters

### sequence

Array of hotkey strings that form the sequence (or accessor function)

`HotkeySequence` | () => `HotkeySequence`

### callback

`HotkeyCallback`

Function to call when the sequence is completed

### options

Options for the sequence behavior (or accessor function)

[`CreateHotkeySequenceOptions`](../interfaces/CreateHotkeySequenceOptions.md) | () => [`CreateHotkeySequenceOptions`](../interfaces/CreateHotkeySequenceOptions.md)

## Returns

`void`

## Example

```tsx
function VimEditor() {
// 'g g' to go to top
createHotkeySequence(['G', 'G'], () => {
scrollToTop()
})

// 'd d' to delete line
createHotkeySequence(['D', 'D'], () => {
deleteLine()
})

// 'd i w' to delete inner word
createHotkeySequence(['D', 'I', 'W'], () => {
deleteInnerWord()
}, { timeout: 500 })

return <div>...</div>
}
```
68 changes: 68 additions & 0 deletions docs/framework/solid/reference/functions/createKeyHold.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
id: createKeyHold
title: createKeyHold
---

# Function: createKeyHold()

```ts
function createKeyHold(key): () => boolean;
```

Defined in: [createKeyHold.ts:46](https://github.com/TanStack/hotkeys/blob/main/packages/solid-hotkeys/src/createKeyHold.ts#L46)

SolidJS primitive that returns whether a specific key is currently being held.

This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
to the global KeyStateTracker and uses a selector to determine if the
specified key is held.

## Parameters

### key

The key to check (e.g., 'Shift', 'Control', 'A') - can be an accessor function

`HeldKey` | () => `HeldKey`

## Returns

Signal accessor that returns true if the key is currently held down

```ts
(): boolean;
```

### Returns

`boolean`

## Examples

```tsx
function ShiftIndicator() {
const isShiftHeld = createKeyHold('Shift')

return (
<div style={{ opacity: isShiftHeld() ? 1 : 0.5 }}>
{isShiftHeld() ? 'Shift is pressed!' : 'Press Shift'}
</div>
)
}
```

```tsx
function ModifierIndicators() {
const ctrl = createKeyHold('Control')
const shift = createKeyHold('Shift')
const alt = createKeyHold('Alt')

return (
<div>
<span style={{ opacity: ctrl() ? 1 : 0.3 }}>Ctrl</span>
<span style={{ opacity: shift() ? 1 : 0.3 }}>Shift</span>
<span style={{ opacity: alt() ? 1 : 0.3 }}>Alt</span>
</div>
)
}
```
Loading
Loading