react-typeahead-input-component

Demo

https://user-images.githubusercontent.com/78295585/166108978-58251611-73af-4d49-ad98-d135d239039a.mp4

Installation

npm i react-typeahead-input-component

Usage

import Search from "react-typeahead-input-component";

##api

| Props | Type | Default | Description | | ----------- | -------- | ------------ | --------------------------------------------------- | | value | string | Required | the value of input | | placeholder | string | "" | placeholder of input | | loading | boolean | false | determines visibility of loading animation | | results | array | [] | results array of your search query response objects | | onClick | function | () => {} | callback function for onChange event |

onClick property takes function and passes results and payload object as a parameter to your function.

results object structure

| properties | Type | Default | Description | | ---------- | ------ | ------------ | ---------------------------------------------- | | img | string | "" | the link to the img source | | title | string | Required | the title of the result | | subtitle | string | Required | the subtitle of the result | | payload | any | "" | anything that will help you handle click event |

payload property is the payload that you can use to handle click event. it could be anything you want. e.g id, name, email etc.

Example

import Search from "react-typeahead-input-component";

const App = () => {
  const results = [
    {
      img: "https://firebasestorage.googleapis.com/v0/b/green-b3fdd.appspot.com/o/images%2FVAJA.JPG?alt=media&token=9bc9d965-164c-4b82-a6a3-9f735f419d2b",
      title: "Vaja",
      subTitle: "Name",
      redirectUrl: "https://www.google.com",
    },
  ];
  return (
    <div className="App">
      <Search
        placeholder="Search"
        value="Georgia"
        results={results}
        onClick={(result) => console.log(result)}
      />
    </div>
  );
};
export default App;