Package Exports

@reaviz/react-use-fuzzy
@reaviz/react-use-fuzzy/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@reaviz/react-use-fuzzy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-use-fuzzy

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;

JSPM

@reaviz/react-use-fuzzy

Package Exports

Readme

react-use-fuzzy

🚀 Install

🎈 Usage

⛓️ Peer Dependencies

🎉 Acknowledgements

License