Elegant, accessible search component for React.

Overview

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.

You might also like...
🔍 GitHub repository search for Tonik
🔍 GitHub repository search for Tonik

Tonik Project for Tonik. Project is about creating a simple GitHub repository search tool. I am using following technologies: TypeScript, HTML5. Code

:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React = 16.8.0 Installation Using npm: $ npm install --save react-un

React Arts is a library of react functional component which provides canvas sketch board in the app.
React Arts is a library of react functional component which provides canvas sketch board in the app.

🎨 React Arts React Arts is a library of react functional component which provides canvas sketch board in the app. This library contains two react com

React component to blur image backgrounds using canvas.
React component to blur image backgrounds using canvas.

React Blur React component for creating blurred backgrounds using canvas. Live demo Installation npm install react-blur --save Usage var Blur = requir

📑 A React component to easily create demos of other components
📑 A React component to easily create demos of other components

React DemoTab 📑 A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

A React component to view a PDF document
A React component to view a PDF document

React PDF viewer A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely. // Core viewer import {

React file input component for complete control over styling and abstraction from file reading.

react-file-reader-input React file input component for complete control over styling and abstraction from file reading. FileReaderInput as={dataForma

 The react UI component for building complex filter criteria
The react UI component for building complex filter criteria

React Filter Control The React component for building the composite filter criteria Demo (JS) | Demo (TS) Together With Data Table Overview Installati

React JSON Viewer Component, Extracted from redux-devtools

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests. react-json-tre

This is a react app that I created for an intern test, involves using a search and price filter features

FRONTEND ENGINEERING INTERN APPLICATION This is an application i created for an intern application test. VIEW APP Available Scripts In the project dir

Kehinde Ojapa 1 Nov 4, 2021
React Typesense Search 10,000 Trending Movies using Instantsearch

Getting Started with Create React App This project was bootstrapped with Create React App. Demo Available Scripts In the project directory, you can ru

Islem Maboud 14 Nov 24, 2022
A unique search bar that filters through data. Built with React, JavaScript, Material UI, Node.js and MySQL

A unique search bar that filters through data. Built with React, JavaScript, Material UI, Node.js and MySQL

Christotle Agholor 4 Nov 22, 2022
GitHub repository search app in React, TypeScript and GraphQL

GitHub repository search app in React, TypeScript and GraphQL

Hesbon Osoro 3 Dec 21, 2022
A React Typescript search interface for the popular Giphy.com service.

giphy-search A React Typescript search interface for the popular Giphy.com service. Lets get to it Scope We want you to create a search interface for

null 1 May 18, 2022
Code Search in natural language for React codebases [JS/TS]. Provided by Wizi AI.

AI powered Code Search for React codebases (JS/TS) by Wizi AI We are launching our Code Search feature as an open-source project for frontend teams to

Wizi HQ 26 Feb 28, 2023
Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Brian Vaughn 1.4k Dec 16, 2022
Responsive and customizable search and select for Giphy's GIFs and Stickers.

Responsive and customizable search and select for Giphy's GIFs. https://sergiop.github.io/react-giphy-searchbox/ React Giphy Searchbox is a powerful r

Sergio Pedercini 46 Sep 4, 2022
Pokedex - Search for Pokémon by name or using the National Pokédex number

Pokédex ?? Tecnologias utilizadas Esse projeto foi desenvolvido com as seguintes

Wellington Garcia 20 Sep 12, 2022
Hypersearch enhances all major search engines (Google, DuckDuckGo, Amazon, etc.) with results from trusted sources in the sidebar and removing results from blocked sources

Hypersearch Coming soon for Firefox and Opera. Microsoft Edge users can install from the Chrome store. Hypersearch enhances all major search engines (

Abhinav Sharma 62 Dec 28, 2022