Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProJump to the item whose label starts with the letters just typed, with a reset timer, for listboxes, menus and trees built from scratch.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in a custom listbox, menu, tree or grid so that typing "ban" moves focus to "Banana", as native selects and the WAI-ARIA patterns do.
Do not use it with Select, Command or Dropdown Menu from this library, which already include type-ahead. It is for text lists, not for filtering them (use useFuzzySearch).
import { useTypeahead } from "@/hooks/use-typeahead"const onKeyDown = useTypeahead(labels, { onMatch: (index) => setActive(index), current: active })
<ul role="listbox" onKeyDown={onKeyDown}>...</ul>useTypeahead(labels: string[], options): (event: React.KeyboardEvent) => void
| Option | Type | Default | Description |
|---|---|---|---|
onMatch | (index: number) => void | - | Called with the index of the matching label. |
current | number | -1 | The active index, where the search starts. |
timeout | number | 700 | Ms of silence before the typed text resets. |
Typing the same letter repeatedly cycles through the labels that start with it. Typing a longer string matches the whole prefix from the current item. Ctrl, Meta and Alt combinations, and keys such as Tab and Enter, are ignored. Matching ignores case and accents.
This is the keyboard behaviour that listbox, menu and tree patterns in the WAI-ARIA Authoring Practices expect. Move focus or aria-activedescendant to the matched item and keep the active item scrolled into view.
The hook ships with renderHook tests (use-typeahead.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.