react-fusejs-fuzzy-search

Fuzzy search by keeping the UI layer as abstract as possible.

The motivation behind the project was to provide an abstract solution that wraps the Fuse instance and provides a reactive way to use it through an hook.

The library was kept as light as possible by trying to make the fuse usage as easy and as transparent as possible.

If you don't want to use the component provided for several personal reasons, the provided hook is likely what you might need / want to use.

Example WITHOUT hooks (using the component)

You can use the Wrapper component that, under the hood, uses the provided hook.

The component allows to host the search area and allows to customize the display results area, you can check the examples/with-component folder for the full example.

Relevant part:

<FuseSearchWrapper
  list={searchArray}
  searchOpts={{
    limit: 10,
  }}
  fuseOpts={{
    includeScore: true,
    keys: ["author", "tags"],
  }}
  searchComponentBuilder={(search) => (
    <>
      <input
        type="text"
        defaultValue={term}
        onChange={(evt) => setTerm(evt.target.value)}
      />
      <button type="button" onClick={() => search(term)}>
        Search for {term}
      </button>
    </>
  )}
  resultsBuilder={(results) => (
    <ul>
      {results.map((v) => (
        <li>{JSON.stringify(v)}</li>
      ))}
    </ul>
  )}
/>

Example with hooks

If you don't want to use the component, you can use the hook to obtain the same result.

An example with the hook is available in the example/with-tailwind-ui folder.

Relevant part:

import { useFuse } from "react-fusejs-fuzzy-search";

Usage:

const { search, results } = useFuse(list, {
  keys: ["title", "author.tags.value"],
  includeScore: true,
  includeMatches: true,
});

Where search is the fuse search function to invoke to populate results according to the specified options passed in the useFuse hook.

For testing locally:

Ensure you have make utility installed and run either of the example available commands (e.g. make link-example-with-component), then run the example (e.g. cd examples/with/component && npm run start)