This fork is (awfully) made to work with React 17, use at your own risk... !

Looking for maintainer. Contact stambanan@pm.me if you're interested.

React wrapper for Algolia Places

Blazing fast address autocomplete React/preact component. :zap:

Demo

Checkout the demo at https://address-autocomplete-react.netlify.com/

Installation

1npm install algolia-places-react --save

or

1yarn add algolia-places-react

Usage

1import React from 'react';
2import AlgoliaPlaces from 'algolia-places-react';
3
4export default () => {
5  return (
6    <AlgoliaPlaces
7      placeholder='Write an address here'
8
9      options={{
10        appId: 'my-app-id',
11        apiKey: 'sharing-is-caring',
12        language: 'sv',
13        countries: ['se'],
14        type: 'city',
15        // Other options from https://community.algolia.com/places/documentation.html#options
16      }}
17
18      onChange={({ query, rawAnswer, suggestion, suggestionIndex }) => 
19        console.log('Fired when suggestion selected in the dropdown or hint was validated.')}
20
21      onSuggestions={({ rawAnswer, query, suggestions }) => 
22        console.log('Fired when dropdown receives suggestions. You will receive the array of suggestions that are displayed.')}
23
24      onCursorChanged={({ rawAnswer, query, suggestion, suggestonIndex }) => 
25        console.log('Fired when arrows keys are used to navigate suggestions.')}
26
27      onClear={() => 
28        console.log('Fired when the input is cleared.')}
29
30      onLimit={({ message }) => 
31        console.log('Fired when you reached your current rate limit.')}
32
33      onError={({ message }) => 
34        console.log('Fired when we could not make the request to Algolia Places servers for any reason but reaching your rate limit.')}
35    />
36  );  
37}

Full API documentation

Live examples

• Hitta skyddsrum

Todo

• Implement support for using Places methods
• Investigate using react-autocomplete instead. For smaller bundle and VDOM usage.