Elegant, accessible search component for React with recent searches & current location functionality.
npm i react-find --save
import React from "react";
import { Search } from "react-find";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const data = [
"Midtown West",
"Liberty Island",
"Financial District",
"Meatpacking District",
"Upper West Side",
"Flatiron"
];
return (
<div className="App">
<Search
data={data}
currentLocation={true}
latestSearch={true}
apiKey={API_KEY}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
| Prop | Type | Description |
|---|---|---|
placeholder |
string | The placeholder text for the input box. |
data |
array | An array of data which acts as the source of data for the dropdown. This prop is required. |
onChange |
function | A function which acts as a callback when the input value is changed. |
onClick |
function | A function which acts as a callback when the dropdown element is clicked. |
currentLocation |
boolean | A boolean value which indicates if current location functionality is enabled. |
latestSearch |
boolean | A boolean value which indicates if latest search functionality is enabled. |
apiKey |
string | If currentLocation is enabled you need to provide the Google API key. |
isFocus |
boolean | A boolean value which indicates if dropdown menus is open. |
- React - A JavaScript library for building user interfaces
MIT Licensed. Copyright (c) George Bardi 2019.