use-fuse
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

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
Parameter Type Required Note
list array The list to filter
searchTerm string The search term to filter by
fuseOptions object see Fuse.js Docs

TypeScript

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

Readme

Keywords

none

Package Sidebar

Install

npm i use-fuse

Weekly Downloads

502

Version

0.0.3

License

MIT

Unpacked Size

4.71 kB

Total Files

5

Last publish

Collaborators

  • balazssagi