React-search-universal NPM

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