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.
yarn add react-geocode-earth-autocompletenpm install --save react-geocode-earth-autocompleteCreate 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>
);
}
}MIT © peacefultruth