react-generic-search

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 for more info.

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