React useFilter Hook

React useFilter Hook

Tags
React.js
hook
filter
useFilter
webworker
Published
Published May 2, 2021
Author
Lakhan Samani
There are times when we need to process and filter data in frontend. Writing the search and filter logic can be an overhead and repeating task. With the help of useFilter hook you don't need to write the filter/search logic.
Also, while dealing with large amount of data, it often takes up lot memory and keeps the main thread blocked till the filtering process is completed. This results into bad user experience. In order to keep the main thread free and run the web application without any glitches we can leverage the use of Web Worker which runs on a separate thread and can share the messages with main thread.
I, along with my friend Yash Joshi developed a react hook useFilter that lets you filter and search data using webworker.

Live Demo

How to use?

Installation

  • Yarn yarn add @promise_learning/usefilter
  • NPM npm install @promise_learning/usefilter

Usage

We recommend using react-window for rendering large data set. Also use useDebounce hook with search so that with every hit a search query is not triggered.
import { useFilter } from '@promise_learning/usefilter'; import from './data.json'; ///////////////////////////////////////// // handle this using the state in ur app //////////////////////////////////////// const searchData = { query: '', fields: ['name'], }; const filtersData = { category: ['Sci Fiction'], }; export const App = () => { const { loading, data: result } = useFilter({ data, search: searchData, filters: filterData }); if (loading) { return <div>Loading..</div> } return ( <> // render result </> ) }

Parameters

Parameter
Type
Required
Array
Required
Object -> {query: '', fields: []}. query is the search term and fields is the object keys to search on
Required
Object -> Key Value Pair. Where key is a field from object in array and value could be possible value
Required

Data Returned

Object with following data is returned by the useFilter hook.
Key
Values
Description
true / false
Worker processing state
Array
filtered response based on the input

When to use?

  • Filter / Search large list in frontend
  • Filter / Search large data table in frontend
Enjoy using @promise_learning/usefilter and shower some love to github repo 🎉