useFuse

Category

@Integrations

Export Size

236 B

Package

@reause/integrations

Last Changed

5 days ago

Easily implement fuzzy search using a hook with Fuse.js.

From the Fuse.js website:

What is fuzzy searching?

Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

Demo

Install Fuse.js as a peer dependency

NPM

npm install fuse.js@^7

Yarn

yarn add fuse.js

Usage

import { useFuse } from '@reause/integrations'
import { useState } from 'react'

const data = [
  'John Smith',
  'John Doe',
  'Jane Doe',
  'Phillip Green',
  'Peter Brown',
]

const [input, setInput] = useState('Jhon D')

const { results } = useFuse(input, data)

/*
 * Results:
 *
 * { "item": "John Doe", "refIndex": 1 }
 * { "item": "John Smith", "refIndex": 0 }
 * { "item": "Jane Doe", "refIndex": 2 }
 *
 */

Type Declarations

export type FuseOptions<T> = IFuseOptions<T>

export interface UseFuseOptions<T> {
    fuseOptions?: FuseOptions<T>;
    resultLimit?: number;
    matchAllWhenSearchEmpty?: boolean;
}

export interface UseFuseReturn<DataItem> {
    fuse: Fuse<DataItem>;
    results: FuseResult<DataItem>[];
}

export function useFuse<DataItem>(search: string, data: readonly DataItem[], options?: UseFuseOptions<DataItem>): UseFuseReturn<DataItem>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

b7739 - fix(integrations): resolve useFuse audit findings (#802)

c0549 - feat(integrations): add useFuse (#138)