This is a custom function designed to filter data in an array based on a search query. It provides flexibility in specifying the keys to search for within the data, as well as the type of search function to use.
npm install search-in-js
yarn add search-in-js
import { useState, useEffect } from "react";
import search from "search-in-js";
const ExampleComponent = () => {
const data = [
{ id: 1, name: "test1", comment: { id: 1, text: "some comment" } },
{ id: 2, name: "test2", comment: { id: 2, text: "some other comment" } },
// More data...
];
// Define keys for searching
const keys = ["id", "comment.text"];
// State for search query and filtered data
const [value, setValue] = useState("");
const [filteredData, setFilteredData] = useState(data);
// Update filtered data when search query changes
useEffect(() => {
setFilteredData(search(value, data, keys, "fuzzy"));
}, [value]);
return (
<div>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<ul>
{filteredData.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};
-
value
(string
): The value to search for in the data. -
data
(Array<T>
): The array of data to search. -
keys
(Array<string>
): The array of keys to search for in the data.if you want to search by id and name, you can use the following keys: const keys = ["id", "name"];
if you want to search by comments.id and comments.text, you can use the following keys: const keys = ["comments.id", "comments.text"];
-
functionType
(SEARCH_FUNCTION
, optional): The type of search function to use. Defaults to "fuzzy".Available search function types: equal, fuzzy, contains, starts-with, ends-with, starts-with-no-space, greater, less, greater-equal, less-equal
Returns: Array<T>
- The filtered data based on the search query.
Contributions are welcome! Please feel free to open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
Feel free to modify and expand upon it to suit your needs!