Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTypo-tolerant search over a list of strings or objects with Fuse.js, returning ranked results with match positions, and a helper to highlight them.
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 for client-side search where people misspell or abbreviate: command palettes, pickers, settings search and small catalogues up to a few tens of thousands of items.
Do not use it for huge datasets (search on the server) or exact filters. Debounce the query with useDebouncedValue if the list is large.
This hook uses fuse.js; the CLI installs it for you.
import { useFuzzySearch } from "@/hooks/use-fuzzy-search"const results = useFuzzySearch(users, query, {
keys: ["name", "email"],
limit: 20,
})
results.map(({ item, matches }) => <Row user={item} />)useFuzzySearch<T>(items: T[], query: string, options?): FuzzyResult<T>[]
| Option | Type | Default | Description |
|---|---|---|---|
keys | string[] | - | Object keys to search (dot paths allowed). Omit for string lists. |
threshold | number | 0.35 | 0 is exact, 1 matches anything. |
limit | number | - | Most results returned. |
ignoreLocation | boolean | true | Match anywhere in the text, not only near the start. |
Each result is { item, score, refIndex, matches }. An empty query returns every item in the original order (score 0), so you can render the same list. The index is built once per items and options, so keep items stable (memoise it).
splitByMatches(text, indices) splits a string into { text, match } segments from a result's matches[n].indices, for bold highlighting.
A hook has no markup. Announce the result count in a polite live region as the query changes, keep the input labelled, and highlight matches with <mark> or bold, not colour alone.
The hook ships with renderHook tests (use-fuzzy-search.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.