Installation

 npm i react-search-universal 

Usage

import React, { useState } from 'react';
import { Search } from 'react-search-universal';


function App() {

  const [value, setValue] = useState("");
  const onSearch = (val) => {
    setValue(val);
  }

  const data = [
    {
      name: "Carl",
      role: "Engineer",
    },
    {
      name: "Josh",
      role: "Doctor",
    },
    {
      name: "Mark",
      role: "Lawyer",
    },
    {
      name: "Karthik",
      role: "Architect",
    },
    {
      name: "Philips",
      role: "Actor",
    },
  ]

  const callback = (data) => {
    console.log(data);
  }
  return (
    <div className="App">
      <Search searchText={value} data={data} filteredData={callback} onSearchChange={onSearch}/>
    </div>
  );
}

export default App;

Props

| Prop | Description | | -------------- | -------------------- | | searchText | Search input field value - Required| | onSearchChange | A function which acts as a callback when the input value is changed - Required| | data | An array of objects which acts as the source of data for filtering values based on search input - Optional| | filteredData | A callback function which returns the filtered data from the source data based on the search input - Optional |

License

MIT Licensed. Copyright (c) Hari Prasad 2022.