@billyen2012/use-ufuzzy

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;