https://github.com/promise-learning/useFilter

A React hook to filter large amount of data using Web Worker.
https://github.com/promise-learning/useFilter

Last synced: 15 days ago
JSON representation

A React hook to filter large amount of data using Web Worker.

• Host: GitHub
• URL: https://github.com/promise-learning/useFilter
• Owner: promise-learning
• License: mit
• Created: 2021-04-24T12:30:26.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-23T04:39:48.000Z (about 3 years ago)
• Last Synced: 2024-05-20T04:02:56.385Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 3.12 MB
• Stars: 25
• Watchers: 2
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• my-awesome-stars - useFilter - learning | 26 | (TypeScript)

README

        
# `useFilter`

A react hook to filter large amount of data in frontend using [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers).In order to keep the main thread free and run the web application without any glitches we can leverage the use of [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) which runs on a separate thread and can share the messages with main thread.

## [Live Demo](https://codesandbox.io/s/usefilter-demo1-mdfz8)

## How to use

### Installation

- NPM: `npm install @promise_learning/usefilter`

- Yarn: `yarn add @promise_learning/usefilter`

### Usage

> We recommend using [react-window](https://www.npmjs.com/package/react-window) for rendering large data set. Also use [`useDebounce`](https://www.npmjs.com/package/use-debounce) hook with search

```jsx

  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 
Loading..

    }


    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](https://github.com/promise-learning/useFilter/blob/main/LICENSE)