https://github.com/peacefultruth/react-geocode-earth-autocomplete

A React component for geocode.earth Autocomplete
https://github.com/peacefultruth/react-geocode-earth-autocomplete

address autocomplete component geocode-earth geocoder mapzen pelias react

Last synced: 8 days ago
JSON representation

A React component for geocode.earth Autocomplete

• Host: GitHub
• URL: https://github.com/peacefultruth/react-geocode-earth-autocomplete
• Owner: peacefultruth
• License: mit
• Created: 2020-06-03T23:03:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:13:26.000Z (7 months ago)
• Last Synced: 2024-09-25T12:14:18.397Z (about 2 months ago)
• Topics: address, autocomplete, component, geocode-earth, geocoder, mapzen, pelias, react
• Language: JavaScript
• Size: 607 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-geocode-earth-autocomplete

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/react-geocode-earth-autocomplete.svg)](https://www.npmjs.com/package/react-geocode-earth-autocomplete) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

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](https://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](https://github.com/hibiken/react-places-autocomplete).

### Installation

```bash

yarn add react-geocode-earth-autocomplete

````

```bash

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

````

### Usage

Create your component, you'll need an api key from [geocode.earth](https://geocode.earth/).

```js

import React, { useState } from 'react';

import GeocodeEarthAutocomplete from 'react-geocode-earth-autocomplete';

export default (props) => {

    const [address, setAddress] = useState();

    return (

       {

          setAddress(newAddress);

        }}

        onSelect={(newAddress) => {

          // do an api call

        }}

      >

        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => {

          


            

            


              {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 (

                  


                    {suggestion.description}

                  

                );

              })}

            

          

        )}

      

    );

  }

}

```


## License

MIT © [peacefultruth](https://github.com/peacefultruth)