react-geocode-earth-autocomplete

Made with create-react-library

A React component to build a customized UI for geocode.earth Autocomplete

Enable you to easily build a customized autocomplete dropdown powered by geocode.earth.

Full control over rendering to integrate well with other libraries (e.g. Redux-Form).

Basically the geocode.earth version of hibiken/react-places-autocomplete.

Installation

yarn add react-geocode-earth-autocomplete

npm install --save react-geocode-earth-autocomplete

Usage

Create your component, you'll need an api key from geocode.earth.

import React, { useState } from 'react';
import GeocodeEarthAutocomplete from 'react-geocode-earth-autocomplete';

export default (props) => {
    const [address, setAddress] = useState();

    return (
      <GeocodeEarthAutocomplete
        searchOptions={{
          api_key: "ge-..."
        }}
        value={address}
        onChange={(newAddress) => {
          setAddress(newAddress);
        }}
        onSelect={(newAddress) => {
          // do an api call
        }}
      >
        {({ 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>
        )}
      </GeocodeEarthAutocomplete>
    );
  }
}

License

MIT © peacefultruth