Popularity
0.7
Growing
Activity
0.0
-
12
1
0

Monthly Downloads: 0
Programming language: JavaScript
Tags: Miscellaneous     Code Design    

react-find alternatives and similar libraries

Based on the "Miscellaneous" category

Do you think we are missing an alternative of react-find or a related project?

Add another 'Miscellaneous' Library

README

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

Alt text

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

Edit react-find

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.


*Note that all licence references and agreements mentioned in the react-find README section above are relevant to that project's source code only.