React hook for client side fuzzy search using Fuse.js
A react hook in Typescript for client side fuzzy search using Fuse.js.
bash
$ npm install --save react-use-fuzzy
`🎈 Usage
typescript
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 = ({ product }) => {
return {product.name} ;
}
interface ProductsListProps {
products: Product[];
}
const ProductsList: React.FC = ({ products }) => {
return (
{
products.map((product) => (
))
}
)
}
const App: React.FC = () => {
const productsData: Product[] = [
{
id: 1,
name: 'T-shirt',
},
{
id: 2,
name: 'Short',
},
]
const [products, setProducts] = useState(productsData);
const { result, keyword, search } = useFuzzy(products, {
keys: ['name'],
});
return (
placeholder='Search products'
value={keyword}
onChange={(e) => search(e.target.value)}
/>
);
}export default App;
``