@geoapify/react-geocoder-autocomplete - React component

@geoapify/react-geocoder-autocomplete is a library that wraps @geoapify/geocoder-autocomplete into a React component.

Installation

@geoapify/react-geocoder-autocomplete has a peer dependancy on @geoapify/geocoder-autocomplete:

npm install @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

yarn add @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

Usage

You will require an API key to be able make requests to Geocoding API. Register and get an API key for Free on myprojects.geoapify.com.

Import styles Import CSS style file from @geoapify-geocoder-autocomplete to make the control appear correctly;
Add Geoapify context and provide an apiKey;
Add Geoapify Geocoder Autocomplete component:

import React, { useState } from 'react'
import { GeoapifyGeocoderAutocomplete, GeoapifyContext } from '@geoapify/react-geocoder-autocomplete'
import '@geoapify/geocoder-autocomplete/styles/minimal.css'
 
const App = () => {
  ...
 
  function onPlaceSelect(value) {
    console.log(value);
  }
 
  function onSuggectionChange(value) {
    console.log(value);
  }
 
  return <GeoapifyContext apiKey="YOUR_API_KEY_HERE">
      <GeoapifyGeocoderAutocomplete placeholder="Enter address here"
        type={type}
        lang={language}
        position={position}
        countryCodes={countryCodes}
        limit={limit}
        value={displayValue}
        placeSelect={onPlaceSelect}
        suggestionsChange={onSuggectionChange}
        />
    </GeoapifyContext>
}
 
export default App

Learn more about provided styles and customization options on @geoapify/geocoder-autocomplete page.
Learn more about the component properties on @geoapify/react-geocoder-autocomplete page.

Learn more