react-find

Elegant, accessible search component for React.

Programming language: JavaScript

Tags: Miscellaneous     Code Design    

README

Elegant, accessible search component for React with recent searches & current location functionality.

Installation

npm i react-find --save

Usage

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);

API

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.

Built With

• React - A JavaScript library for building user interfaces

License

MIT Licensed. Copyright (c) George Bardi 2019.