Skip to content
React hook for client side fuzzy search using Fuse.js
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src feat(search): change default fuzzy threshold for fuse.js Dec 10, 2019
.gitignore initial project Dec 9, 2019
.npmignore chore: add more files to npmignore Dec 10, 2019
.prettierrc
.travis.yml feat(search): add react hook for fuzzy search Dec 9, 2019
README.md docs: fix small issues in README.md Dec 10, 2019
nodemon.json initial project Dec 9, 2019
package-lock.json 1.0.4 Dec 10, 2019
package.json 1.0.4 Dec 10, 2019
tsconfig.build.json initial project Dec 9, 2019
tsconfig.json initial project Dec 9, 2019
tslint.json initial project Dec 9, 2019

README.md

react-use-fuzzy

NPM version Build Status Coverage Status

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

🚀 Install

$ npm install --save react-use-fuzzy

🎈 Usage

import React, { useState } from 'react';
import { useFuzzy } from 'react-use-fuzzy';
import './App.css';

interface Product {
  id: number;
  name: string;
}

interface ProductItemProps {
  product: Product;
}

const ProductItem: React.FC<ProductItemProps> = ({ product }) => {
  return <li>{product.name}</li>;
}

interface ProductsListProps {
  products: Product[];
}

const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
  return (
    <ul>
    {
      products.map((product) => (
        <ProductItem key={product.id} product={product} />
      ))
    }
    </ul>
  )
}

const App: React.FC = () => {
  const productsData: Product[] = [
    {
      id: 1,
      name: 'T-shirt',
    },
    {
      id: 2,
      name: 'Short',
    },
  ]
  const [products, setProducts] = useState<Product[]>(productsData);

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

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

export default App;

⛓️ Peer Dependencies

🎉 Acknowledgements

License

MIT ©

You can’t perform that action at this time.