React component for Google Maps Places Autocomplete

Overview

MIT-License Gitter Maintainers Wanted

We are looking for maintainers!

In order to ensure active development going forward, we are looking for maintainers to join the project. Please contact the project owner if you are interested.

React Places Autocomplete

A React component to build a customized UI for Google Maps Places Autocomplete

Demo

Live demo: hibiken.github.io/react-places-autocomplete/

Features

  1. Enable you to easily build a customized autocomplete dropdown powered by Google Maps Places Library
  2. Utility functions to geocode and get latitude and longitude using Google Maps Geocoder API
  3. Full control over rendering to integrate well with other libraries (e.g. Redux-Form)
  4. Mobile friendly UX
  5. WAI-ARIA compliant
  6. Support Asynchronous Google script loading

Installation

To install the stable version

npm install --save react-places-autocomplete

React component is exported as a default export

import PlacesAutocomplete from 'react-places-autocomplete';

utility functions are named exports

import {
  geocodeByAddress,
  geocodeByPlaceId,
  getLatLng,
} from 'react-places-autocomplete';

Getting Started

To use this component, you are going to need to load Google Maps JavaScript API

Load the library in your project

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Create your component

import React from 'react';
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autocomplete';

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }

  handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log('Success', latLng))
      .catch(error => console.error('Error', error));
  };

  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? 'suggestion-item--active'
                  : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                  : { backgroundColor: '#ffffff', cursor: 'pointer' };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion, {
                      className,
                      style,
                    })}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    );
  }
}

Props

PlacesAutocomplete is a Controlled Component with a Render Prop. Therefore, you MUST pass at least value and onChange callback to the input element, and render function via children.

Prop Type Required Description
value string value for the input element
onChange function onChange function for the input element
children function Render function to specify the rendering
onSelect function Event handler to handle user's select event
onError function Error handler function that gets called when Google Maps API responds with an error
searchOptions object Options to Google Maps API (i.e. bounds, radius)
debounce number Number of milliseconds to delay before making a call to Google Maps API
highlightFirstSuggestion boolean If set to true, first list item in the dropdown will be automatically highlighted
shouldFetchSuggestions boolean Component will hit Google Maps API only if this flag is set true
googleCallbackName string You can provide a callback name to initialize PlacesAutocomplete after google script is loaded

value

Type: string, Required: true

onChange

Type: function, Required: true

Typically this event handler will update value state.

<PlacesAutocomplete
  value={this.state.value}
  onChange={value => this.setState({ value })}
>
  {/* custom render function */}
</PlacesAutocomplete>

children

Type: function Required: true

This is where you render whatever you want to based on the state of PlacesAutocomplete. The function will take an object with the following keys.

  • getInputProps : function
  • getSuggestionItemProps : function
  • loading : boolean
  • suggestions : array

Simple example

const renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions }) => (
  <div className="autocomplete-root">
    <input {...getInputProps()} />
    <div className="autocomplete-dropdown-container">
      {loading && <div>Loading...</div>}
      {suggestions.map(suggestion => (
        <div {...getSuggestionItemProps(suggestion)}>
          <span>{suggestion.description}</span>
        </div>
      ))}
    </div>
  </div>
);

// In render function
<PlacesAutocomplete value={this.state.value} onChange={this.handleChange}>
  {renderFunc}
</PlacesAutocomplete>;

getInputProps

This function will return the props that you can spread over the <input /> element. You can optionally call the function with an object to pass other props to the input.

// In render function
<input {...getInputProps({ className: 'my-input', autoFocus: true })} />

getSuggestionItemProps

This function will return the props that you can spread over each suggestion item in your autocomplete dropdown. You MUST call it with suggestion object as an argument, and optionally pass an object to pass other props to the element.

// Simple example
<div className="autocomplete-dropdown">
  {suggestions.map(suggestion => (
    <div {...getSuggestionItemProps(suggestion)}>
      {suggestion.description}
    </div>
  ))}
</div>

// Pass options as a second argument
<div className="autocomplete-dropdown">
  {suggestions.map(suggestion => {
    const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
    return (
      <div {...getSuggestionItemProps(suggestion, { className })}>
        {suggestion.description}
      </div>
    );
  })}
</div>

loading

This is a boolean flag indicating whether or not the request is pending, or has completed.

suggestions

This is an array of suggestion objects each containing all the data from Google Maps API and other metadata.

An example of a suggestion object.

{
  active: false,
  description: "San Francisco, CA, USA",
  formattedSuggestion: { mainText: "San Francisco", secondaryText: "CA, USA" },
  id: "1b9ea3c094d3ac23c9a3afa8cd4d8a41f05de50a",
  index: 0,
  matchedSubstrings: [ {length: 8, offset: 0} ],
  placeId: "ChIJIQBpAG2ahYAR_6128GcTUEo",
  terms: [
    { offset: 0, value: "San Francisco" },
    { offset: 15, value: "CA" },
    { offset: 19, value: "USA" }
  ],
  types: ["locality", "political", "geocode"]
}

onSelect

Type: function Required: false, Default: null

You can pass a function that gets called instead of onChange function when user hits the Enter key or clicks on a suggestion item.

The function takes three positional arguments. First argument is address, second is placeId and third is the entire suggestion object.

// NOTE: `placeId` and `suggestion` are null when user hits Enter key with no suggestion item selected.
const handleSelect = (address: string, placeId: ?string, suggestion: ?object) => {
  // Do something with address and placeId and suggestion
}

// Pass this function via onSelect prop.
<PlacesAutocomplete
  value={this.state.value}
  onChange={this.handleChange}
  onSelect={this.handleSelect}
>
  {/* Custom render function */}
</PlacesAutocomplete>

onError

Type: function Required: false

You can pass onError prop to customize the behavior when google.maps.places.PlacesServiceStatus is not OK (e.g., no predictions are found)

Function takes status (string) and clearSuggestions (function) as parameters

// Log error status and clear dropdown when Google Maps API returns an error.
const onError = (status, clearSuggestions) => {
  console.log('Google Maps API returned error with status: ', status)
  clearSuggestions()
}

<PlacesAutocomplete
  value={this.state.value}
  onChange={this.handleChange}
  onError={onError}
>
  {/* Custom render function */}
</PlacesAutocomplete>

searchOptions

Type: Object Required: false Default: {}

You can fine-tune the settings passed to the AutocompleteService class with searchOptions prop. This prop accepts an object following the same format as google.maps.places.AutocompletionRequest (except for input, which comes from the value of the input field).

// these options will bias the autocomplete predictions toward Sydney, Australia with a radius of 2000 meters,
// and limit the results to addresses only
const searchOptions = {
  location: new google.maps.LatLng(-34, 151),
  radius: 2000,
  types: ['address']
}

<PlacesAutocomplete
  value={this.state.value}
  onChange={this.handleChange}
  searchOptions={searchOptions}
>
  {/* Custom render function */}
</PlacesAutocomplete>

debounce

Type: number Required: false Default: 200

The number of milliseconds to delay before making a call to Google Maps API.

highlightFirstSuggestion

Type: boolean Required: false Default: false

If set to true, first suggestion in the dropdown will be automatically set to be active.

shouldFetchSuggestions

Type: boolean Required: false Default: true

// Only fetch suggestions when the input text is longer than 3 characters.
<PlacesAutocomplete
  value={this.state.address}
  onChange={this.handleChange}
  shouldFetchSuggestions={this.state.address.length > 3}
>
  {/* custom render function */}
</PlacesAutocomplete>

googleCallbackName

Type: string Required: false Default: undefined

If provided, component will initialize after the browser has finished downloading google script.

IMPORTANT: To enable this async mode, you need to provide the same callback name to google script via callback=[YOUR CALLBACK NAME].

Example:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myCallbackFunc"></script>

Then, provide googleCallbackName prop to PlacesAutocomplete.

<PlacesAutocomplete
  value={this.state.value}
  onChange={this.handleChange}
  googleCallbackName="myCallbackFunc"
>
  {/* custom render function */}
</PlacesAutocomplete>

NOTE: If there are more than one PlacesAutocomplete components rendered in the page, set up a callback function that calls a callback function for each component.

Example:

<script>
window.myCallbackFunc = function() {
  window.initOne && window.initOne();
  window.initTwo && window.initTwo();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myCallbackFunc"></script>
<PlacesAutocomplete
  value={this.state.value}
  onChange={this.handleChange}
  googleCallbackName="initOne"
>
  {/* custom render function */}
</PlacesAutocomplete>

<PlacesAutocomplete
  value={this.state.value}
  onChange={this.handleChange}
  googleCallbackName="initTwo"
>
  {/* custom render function */}
</PlacesAutocomplete>

Utility Functions

geocodeByAddress API

/**
 * Returns a promise
 * @param {String} address
 * @return {Promise}
 */
geocodeByAddress(address);

address

Type: String, Required: true

String that gets passed to Google Maps Geocoder

import { geocodeByAddress } from 'react-places-autocomplete';

// `results` is an entire payload from Google API.
geocodeByAddress('Los Angeles, CA')
  .then(results => console.log(results))
  .catch(error => console.error(error));

geocodeByPlaceId API

/**
 * Returns a promise
 * @param {String} placeId
 * @return {Promise}
 */
geocodeByPlaceId(placeId);

placeId

Type: String, Required: true

String that gets passed to Google Maps Geocoder

import { geocodeByPlaceId } from 'react-places-autocomplete';

// `results` is an entire payload from Google API.
geocodeByPlaceId('ChIJE9on3F3HwoAR9AhGJW_fL-I')
  .then(results => console.log(results))
  .catch(error => console.error(error));

getLatLng API

/**
 * Returns a promise
 * @param {Object} result
 * @return {Promise}
 */
getLatLng(result);

result

Type: Object Required: true

One of the element from results (returned from Google Maps Geocoder)

import { geocodeByAddress, getLatLng } from 'react-places-autocomplete';

geocodeByAddress('Tokyo, Japan')
  .then(results => getLatLng(results[0]))
  .then(({ lat, lng }) =>
    console.log('Successfully got latitude and longitude', { lat, lng })
  );

Discussion

Join us on Gitter if you are interested in contributing!

License

MIT

Issues
  • try this 845 Wild Rose Dr. Menomonee Falls, WI 53051 address street number not in geocodeByAddress this method

    try this 845 Wild Rose Dr. Menomonee Falls, WI 53051 address street number not in geocodeByAddress this method

    Do you want to request a feature or report a bug?

    bug

    What is the current behavior?

    now given this 845 Wild Rose Dr. Menomonee Falls, WI 53051 address .its getting response not present in street number

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

    1.enter this 845 Wild Rose Dr. Menomonee Falls, WI 53051 2. in geocodeByAddress use this method return below this response [{"address_components":[{"long_name":"Wild Rose Court","short_name":"Wild Rose Ct","types":["route"]},{"long_name":"Lilly Creek","short_name":"Lilly Creek","types":["neighborhood","political"]},{"long_name":"Menomonee Falls","short_name":"Menomonee Falls","types":["locality","political"]},{"long_name":"Waukesha County","short_name":"Waukesha County","types":["administrative_area_level_2","political"]},{"long_name":"Wisconsin","short_name":"WI","types":["administrative_area_level_1","political"]},{"long_name":"United States","short_name":"US","types":["country","political"]},{"long_name":"53051","short_name":"53051","types":["postal_code"]}],"formatted_address":"Wild Rose Ct, Menomonee Falls, WI 53051, USA","geometry":{"bounds":{"south":43.1392488,"west":-88.0781674,"north":43.1416764,"east":-88.07694579999999},"location":{"lat":43.1405888,"lng":-88.0777148},"location_type":"GEOMETRIC_CENTER","viewport":{"south":43.1391136197085,"west":-88.0789055802915,"north":43.1418115802915,"east":-88.0762076197085}},"place_id":"ChIJkSH4SRYCBYgRP1wgQkwZ6ic","types":["route"]}] What is the expected behavior?

    In response not have street number in above response

    Which versions of ReactPlacesAutocomplete, and which browser / OS are affected by this issue?

    "react-places-autocomplete": "7.3.0", "OS"=Ubuntu 19.10

    opened by boopathi2710 0
  • hey anyone got it mocked in jest

    hey anyone got it mocked in jest

    i tried to mock in jest image

    showing me an error on shallow render get an error image

    opened by georgesh96 0
  • Returns wrong coordinates for  Columbus, IN, USA

    Returns wrong coordinates for Columbus, IN, USA

    **Report a bug ** Why does react-places-autocomplete gives same coordinates for Columbus, OH, USA and Columbus, IN, USA?

    (Latitude: 39.9611755 Longitude: -82.99879419999999 for both places)

    opened by nimishamohanv 0
  • How to add Maps Object

    How to add Maps Object

    This line: location: new google.maps.LatLng(-34, 151),

    how to get google object?

    I tried

    searchOptions={{location: new google.maps.LatLng(-34, 151)}}

    but is giving error.

    Im trying to restrict by country

    componentRestrictions={{ country: "br" }}

    but is showing address from around the world.

    opened by tresloukadu 0
  • Search by addres or postal_code not working

    Search by addres or postal_code not working

    I need to search by address or posta_code, at the same time. I have something like this

    <PlacesAutocomplete
                            value={this.props.address}
                            onChange={this.props.onHandleChange}
                            onSelect={this.props.onSelect}
                            searchOptions={{
                                componentRestrictions:{ country:  selectedCountry},
                                types:["address", "(regions)"]
                            }}
                            >
    

    but it returns

    predictions: [] status: "INVALID_REQUEST"

    with only address works for address, but when I try with regions it return for example the postal code from london but I need a postal code more precise.

    This are all my dependencies and versions

    "dependencies": {
        "axios": "^0.21.1",
        "final-form": "^4.20.1",
        "i18next": "^19.8.4",
        "jquery": "^3.5.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-final-form": "^6.5.2",
        "react-i18next": "^9.0.10",
        "react-intl": "^5.10.16",
        "react-places-autocomplete": "^7.3.0",
        "react-redux": "^7.2.1",
        "react-select2-wrapper": "^1.0.4-beta6",
        "react-tooltip": "^4.2.13",
        "redux": "^4.0.5",
        "redux-form": "^8.3.6",
        "redux-saga": "^1.1.3"
      }
    
    opened by braianj 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Type error for KeyboardEventHandler

    Type error for KeyboardEventHandler

    Do you want to request a feature or report a bug? Bug

    What is the current behavior? I am trying to use the lib with TypeScript and getting an error related to KeyboardEventHandler:

    Types of property 'onKeyDown' are incompatible.
          Type 'KeyboardEventHandler<Element>' is not assignable to type 'KeyboardEventHandler<HTMLInputElement>'.
            Types of parameters 'event' and 'event' are incompatible.
              Property 'code' is missing in type 'KeyboardEvent<HTMLInputElement>' but required in type 'KeyboardEvent<Element>'
    

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Just following the docs is throwing this compilation error for the input element.

    What is the expected behavior? Changing onKeyDown: React.KeyboardEventHandler to onKeyDown: React.KeyboardEventHandler<HTMLInputElement> seems to work properly and compile.

    Which versions of ReactPlacesAutocomplete, and which browser / OS are affected by this issue? "react-places-autocomplete": "^7.3.0", "@types/react-places-autocomplete": "^7.2.8",

    opened by igoratf 1
  • Not able to select suggestions by clicking (only tab works) react-places-autocomplete

    Not able to select suggestions by clicking (only tab works) react-places-autocomplete

    When i use with phone browser, can't even select with clicking. In Computer browser only work with tab.

    `import React, { useState } from 'react'; import PlacesAutocomplete, { geocodeByAddress, getLatLng, } from 'react-places-autocomplete';

    const LocationSearchInput = () => { const [address, setAddress] = useState(''); const [coordinates, setCoordinates] = useState({ lat: null, lng: null }); const handleSelect = async value => { const results = await geocodeByAddress(value); const latLng = await getLatLng(results[0]) setAddress(value); setCoordinates(latLng) } return ( <PlacesAutocomplete value={this.state.address} onChange={setAddress} onSelect={handleSelect} > {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (

    <input {...getInputProps({ placeholder: 'Search Places ...', className: 'location-search-input', })} />
    {loading &&
    Loading...
    } {suggestions.map(suggestion => { const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'; // inline style for demonstration purpose const style = suggestion.active ? { backgroundColor: '#fafafa', cursor: 'pointer' } : { backgroundColor: '#ffffff', cursor: 'pointer' }; return ( <div {...getSuggestionItemProps(suggestion, { className, style, })} > {suggestion.description}
    ); })}
    )} );

    }`

    opened by Sithu-Soe 4
  • Bump path-parse from 1.0.5 to 1.0.7

    Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Error from Google Maps API

    Error from Google Maps API

    We're getting REQUEST_DENIED from Google Maps API. Is there any chance this will be resolved since we're using this package on prod.

    opened by CUFTA22 2
  • Releases(v7.3.0)
    React Google Places Autocomplete input -- fully customizable

    React Google Places Autocomplete React component for easily use Google Places Autocomplete Getting started Install the latest version: npm install --s

    null 224 Jan 16, 2022
    React-autocomplete-pure - Typescript-friendly autocomplete component for React.js

    react-autocomplete-pure Typescript-friendly autocomplete component for React.js. Fully customizable for your needs. Inspired by react-autosuggest and

    null 0 Jan 8, 2022
    React components for google places API.

    The package provides 3 tools for working with google places services: ReactGoogleAutocomplete is a simple html input component that provides functiona

    Ven Korolev 246 Jan 5, 2022
    React/preact wrapper for Algolia Places

    Looking for maintainer. Contact [email protected] if you're interested. React wrapper for Algolia Places Blazing fast address autocomplete React/preact

    null 60 Oct 1, 2021
    WAI-ARIA compliant React autocomplete (combobox) component

    React Autocomplete Accessible, extensible, Autocomplete for React.js. <Autocomplete getItemValue={(item) => item.label} items={[ { label: 'app

    React Community 2.2k Jan 12, 2022
    ⚡️ Mobile-friendly React autocomplete component

    instatype A mobile-friendly React autocomplete component Demo unsplash.now.sh (source) Install npm install instatype --save Contribute npm run example

    Gabe Ragland 45 Jun 14, 2021
    A React component for Autocomplete Hint.

    react-autocomplete-hint A React component for Autocomplete Hint. Demo Demo can be found here: https://ejmudi.github.io/react-autocomplete-hint/ Instal

    Mudi Ejenavi 142 Jan 12, 2022
    📝 React component implements configurable GitHub's like textarea autocomplete.

    react-textarea-autocomplete ?? Enhanced textarea to achieve autocomplete functionality. This package provides React Component to achieve GitHub's like

    Webscope.io 390 Jan 15, 2022
    Autocomplete widget based on Facebook React

    React Autocomplete Autocomplete component for React. Installation Install via npm: % npm install @prometheusresearch/react-autocomplete Credits React

    Prometheus Research 38 Aug 23, 2021
    🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

    downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

    Downshift 10.3k Jan 20, 2022
    Autocomplete input field for React

    react-autocomplete-input Autocomplete input field for React Demo Demo and playground are available here Usage Example import TextInput from 'react-aut

    Yury Dymov 122 Jan 11, 2022
    An autocomplete for abbreviations/acronyms searching by description rather than the abbreviation text.

    An autocomplete for abbreviations/acronyms searching by description rather than the abbreviation text.

    Shen Yang 1 Sep 22, 2021
    Chakra UI Simple Autocomplete

    A simple autocomplete input built with Chakra UI

    Federico Joel Orlandau 16 Jan 16, 2022
    Search-Engine - Google Search Suggestions App Built Using React

    In this project, let's build a Google Search Suggestions app by applying the con

    Ambati-SaiKumarReddy 1 Jan 4, 2022
    WAI-ARIA compliant React autosuggest component

    React Autosuggest Project Status Looking for maintainers! Unfortunately, I don't have the time to maintain this project anymore. If you are interested

    Misha Moroshko 5.8k Jan 15, 2022
    An accessible React component to take the pain out of creating auto-suggestion components

    React-Autosuggestions An accessible React component to take the pain out of creating auto-suggestion components Usage: import React from 'react'; impo

    Amy Shackles 10 Sep 23, 2021
    React dropdown component NOW

    react-dropdown-now The demo page is here. react-dropdown-now is a fork of react-dropdown. requires React >= 16.8 import { Dropdown, Selection } from '

    null 11 Oct 20, 2021
    Minimalistic dropdown and auto-complete component with filtering and keyboard support

    revo-dropdown Minimalistic dropdown webcomponent. After long search we couldn't find any cross platform and had to build our own inspired by the lates

    Revolist 18 Nov 16, 2021
    A fantastically simple tagging component for your projects

    React tags React-tags is a simple tagging component ready to drop in your projects. The component is inspired by GMail's To field in the compose windo

    React Tags 1.2k Jan 11, 2022