useFilter

A react hook to filter large amount of data in frontend using Web Worker.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.

Live Demo

How to use

Installation

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

Usage

We recommend using react-window for rendering large data set. Also use useDebounce hook with search

  import { useFilter } from '@promise_learning/usefilter';
  import from './data.json';


  ///////////////////////////////////////////
  // handle this using the state in your 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 | | --------- | ------------------------------------------------------------------------------------------------------------ | -------- | | data | Array | true | | search | Object -> {query: '', fields: [], enableHighlighting: true}. query is the search term, fields is the object keys to search on and enableHighlighting lets you highlight the matching part | false | | filters | Object -> Key Value Pair. Where key is a field from object in array and value could be possible value | false |

Data Returned

Object with following data is returned by the useFilter hook.

| Key | Values | Description | | ------- | ---------------- | ------------------------------------------------ | | loading | true / false | Worker state if it is processing the data or not | | data | Array | filtered response based on the input |

When to use?

• Filter / Search large list in frontend
• Filter / Search large data table in frontend

License

MIT License