KMP-Places-Autocomplete

0.3.1indexed

Simplifies address, city, and country entry in forms using Google Places API. Integrates with Compose Multiplatform, supporting autocomplete functionality for enhanced user experience.

AndroidNative·ngallazzi/KMP-Places-Autocomplete

Stars

—

Used by

dependents

Health

/ 100

KMP Places Autocomplete 📌

badge-android badge-ios

Introduction

A simple Compose Multiplatform library to fill addresses, cities and countries in a form, based on Google Places API by Google https://developers.google.com/maps/documentation/places/web-service/autocomplete. For Android and IOS

Demo

⚙️ Setup

Please generate a valid Google Places API key and add it to your project. You can find the instructions to generate key on Google docs: https://developers.google.com/maps/documentation/places/web-service/get-api-key Use KMPPlaces.initialize(apiKey) to initialize the library.

android - KMPPlaces.initialize(apiKey) - normally in src/androidMain/MainActivity
ios - KMPPlaces.initialize(apiKey) - normally in src/iosMain/MainViewController

Then add the dependency to your project:

repositories {
    mavenCentral()
}

dependencies {
    implementation("io.github.ngallazzi:KMP-Places-Autocomplete:<LAST_VERSION>")
}

Usage

Just put AddressAutocompleteForm or PlaceAutoCompleteTextField composable within your app theme. Handle state from related lambda

// If you need the complete form
@Composable
fun MyLayout(){
    MaterialTheme {
        AddressAutocompleteForm(
            modifier = Modifier.fillMaxWidth().padding(24.dp),
            onSubmit = { state ->
                // Handle state changes here
            })
    }
}

// If you have your own layout and you only need the autocomplete field with its details

{
    MaterialTheme {
        Column {
            PlaceAutoCompleteTextField(
                label = ,
                modifier = Modifier.fillMaxWidth().padding(dp),
                onSuggestionSelected = { placeDetails ->
                    placeDetailsState = placeDetails
                })
        }
    }
}

Debouncing API calls

By default, the API is called on every keystroke. To reduce network requests while typing, use the debounceMs parameter:

PlaceAutoCompleteTextField(
    label = "Please search a place",
    modifier = Modifier.fillMaxWidth().padding(24.dp),
    debounceMs = 300, // wait 300ms after the user stops typing
    onSuggestionSelected = { placeDetails ->
        placeDetailsState = placeDetails
    })

The same parameter is also available on AddressAutocompleteForm. A value of 0 (default) disables debouncing.