react-hook-fuzzy

react-hook-fuzzy is a lightweight and easy-to-use React hook for performing fuzzy searches on arrays of objects. It allows you to quickly filter an array based on a search term, returning only the items that match the search criteria.

Installation

  npm install react-hook-fuzzy

Usage/Examples

import { useFuzzy } from 'react-hook-fuzzy'

const songs = [
    {
        name: "Campfire Song",
        artist: "Spongebob",
    }, 
    {
        name: "Lacrimosa",
        artist: "Mozart",
    }
]

const App = () => {
    const { results, term, search } = useFuzzy(songs, ["title", "artist"]);

    return (
        <>
            <input
                value={term}
                onChange={(e) => {
                    search(e.target.value);
                }}
            />
            {
                results.map(song => <p>{song.title}</p>)
            }
        </>
    )    
}

Options

react-hook-fuzzy provides configuration options through an optional third parameter in the hook

Option	description	default
caseSensitive	Fuzzy search should be case sensitive	false
sort	Fuzzy search will be sorted by closest match	false
allOnEmpty	Fuzzy search will return all items if there is not a current search term	true

Example with options

import { useFuzzy } from 'react-hook-fuzzy'

const songs = [
    {
        name: "Campfire Song",
        artist: "Spongebob",
    }, 
    {
        name: "Lacrimosa",
        artist: "Mozart",
    }
]

const App = () => {
    const { results, term, search } = useFuzzy(songs, ["title", "artist"], {
        caseSensitive: true
    });

    return (
        <>
            <input
                value={term}
                onChange={(e) => {
                    search(e.target.value);
                }}
            />
            {
                results.map(song => <p>{song.title}</p>)
            }
        </>
    )    
}