@reaviz/react-use-fuzzy
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

react-use-fuzzy

A react hook in Typescript for client side fuzzy search using Fuse.js.

🚀 Install

$ npm install --save @reaviz/react-use-fuzzy

🎈 Usage

import React, { useState } from 'react';
import { useFuzzy } from '@reaviz/react-use-fuzzy';


const productsData: Product[] = [
  {
    id: 1,
    name: 'T-shirt',
  },
  {
    id: 2,
    name: 'Short',
  },
];

export const App: FC = () => {
  const { result, keyword, search } = useFuzzy<Product>(productsData, {
    keys: ['name'],
  });

  return (
    <div className='App'>
      <header className='App-header'>
        <input
          type='text'
          placeholder='Search products'
          value={keyword}
          onChange={(e) => search(e.target.value)}
        />
        <pre>
          {JSON.stringify(result, null, 2)}
        </pre>
      </header>
    </div>
  );
};

Package Sidebar

Install

npm i @reaviz/react-use-fuzzy

Weekly Downloads

11,753

Version

1.0.3

License

MIT

Unpacked Size

5.01 kB

Total Files

7

Last publish

Collaborators

  • shaswat-anand
  • stephyang
  • mnttnm
  • evgeniy.kulynych
  • jweinstein92
  • amcdnl