useUFuzzy
A React hook for fuzzy search
Installations
npm i @billyen2012/use-ufuzzy
Example
- the example should be super self-explanatory, so no api references will be provided.
import React from "react";
import useUfuzzy from "@billyen2012/use-ufuzzy";
const items = [
{ firstName: "Liam", lastName: "Johnson" },
{ firstName: "Emma", lastName: "Smith" },
{ firstName: "Noah", lastName: "Williams" },
{ firstName: "Olivia", lastName: "Jones" },
{ firstName: "Tarry", lastName: "Brown" },
{ firstName: "Jackson", lastName: "Davis" },
{ firstName: "Ava", lastName: "Miller" },
{ firstName: "Ethan", lastName: "Wilson" },
{ firstName: "Mia", lastName: "Moore" },
{ firstName: "Lucas", lastName: "Anderson" },
];
const DEFAULT_SEARCH = "";
function Example() {
const {
result,
search,
setSearch,
// after hook is mounted, you must use setItems() to update the search items
setItems,
} = useUfuzzy(items, {
defaultSearch: DEFAULT_SEARCH,
RenderHighlight: ({ text }) => (
<mark style={{ backgroundColor: "transparent", color: "orange" }}>
{text}
</mark>
),
ItemTextGetter: ({ firstName, lastName }) => {
return firstName + " " + lastName;
},
});
return (
<div style={{ padding: "24px" }}>
<input
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
/>
<div>
<ul>
{result.map(({ highlight, item }, i) => (
<li
key={"list-item-" + i}
onClick={() => {
alert(item.firstName + " " + item.lastName);
}}
>
{highlight}
</li>
))}
</ul>
</div>
</div>
);
}
export default Example;