Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-use-fuzzy with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("fuse.js/package.json"); // fuse.js is a peer dependency. var reactUseFuzzy = require("react-use-fuzzy")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-use-fuzzy v1.0.4

React hook for client side fuzzy search using Fuse.js

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 ©

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free