@promise_learning/usefilter
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i @promise_learning/usefilter

    DownloadsWeekly Downloads

    49

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    42.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • lakhansamani