use-fuse v0.0.3

A tiny wrapper around the Fuse.js fuzzy-search library using React Hooks.

Demo

Basic usage

Install

using NPM:

npm install use-fuse --save

or Yarn:

yarn add use-fuse --save

Usage

The library exports a single hook.

Example

import React from 'react'
import useFuse from 'use-fuse'

// see: https://fusejs.io/
const fuseOptions = {
    keys: ['name'],
    threshold: 0.6,
}

function App() {
    const [list] = React.useState([
        { name: 'Hesse' },
        { name: 'Pelevin' },
        { name: 'Steinbeck' },
        { name: 'Moore' },
        { name: 'Atwood' },
    ])
    const [search] = React.useState('')
    const filteredList = useFuse(list, search, fuseOptions)

    return (
        <ul>
            {filteredList.map(item => (
                <li key={item.name}>{item.name}</li>
            ))}
        </ul>
    )
}

Parameters

 useFuse(list, searchTerm, fuseOptions) : filteredList

TypeScript

Type definition of Fuse.js has some limitations so you may have to use some type casting if using TypeScript.