# react-generic-search

> React.js Generic Search Component

Latest version **1.0.5** (published 2023-04-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-generic-search
pnpm add react-generic-search
yarn add react-generic-search
bun add react-generic-search
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-04-04 |
| First published | 2023-04-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Haseeb Ahmed |
| Maintainers | haseebbhatti742 |
| Keywords | react, react-search, component, search-component, react-search-component, search, generic, generic-search, react-generic-search |

## Links

- npm: https://www.npmjs.com/package/react-generic-search
- Repository: https://github.com/haseebbhatti742/react-generic-search
- Homepage: https://github.com/haseebbhatti742/react-generic-search#readme
- Issues: https://github.com/haseebbhatti742/react-generic-search/issues
- npm.io page: https://npm.io/package/react-generic-search

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-04-04
- 1.0.4 — 2023-04-04
- 1.0.3 — 2023-04-04
- 1.0.2 — 2023-04-04
- 1.0.1 — 2023-04-04
- 1.0.0 — 2023-04-04
- 0.0.9 — 2023-04-04
- 0.0.7 — 2023-04-04
- 0.0.6 — 2023-04-04
- 0.0.5 — 2023-04-04
- 0.0.4 — 2023-04-04
- 0.0.3 — 2023-04-04
- 0.0.2 — 2023-04-04
- 0.0.1 — 2023-04-04

## README

# Getting Started

## Available Scripts

For adding the library, you have to run

### `npm install react-generic-search`

## Basic Usage

To load items async before running the search to filter results you can pass a function to the `getItemsAsync` prop which will be triggered to load the results each key change. An example below using the github api to search for repos. Check out the [example](https://github.com/StevenIseki/react-search/blob/master/example) for more info.

```jsx
import { useEffect, useState } from "react";
import ReactGenericSearch from "react-generic-search";
import "./App.css";

function App() {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((res) => {
        setData(res);
      })
      .catch((err) => {
        console.lof(err);
      });
  }, []);

  useEffect(() => {
    setFilteredData(data);
  }, [data]);

  return (
    <div>
      <ReactGenericSearch
        style={{ marginBottom: "50px" }}
        data={data}
        className="search"
        filters={[
          "id",
          "name",
          "city",
          "lat",
          "lng",
          "street",
          "suite",
          "zipcode",
          "bs",
          "catchPhrase",
        ]}
        callback={(record) => {
          setFilteredData(record);
        }}
      />
    </div>
  );
}

export default App;
```

## Props

### data (required)

Array of objects that you want to filter

### filters (required)

Array of strings that containts the keys as filter based on which you want to filter the data. No matter what is the depth.

### callback (required)

Callback function returning the data after filteration.

### others (optional)

Any other basic input prop that you want to add. i.e style, placeholder, e.t.c

---
_Source: https://npm.io/package/react-generic-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._