From 868f85f7e575111a7e7e0811adc4a9b54812f378 Mon Sep 17 00:00:00 2001 From: Matija Martic Date: Thu, 11 Jul 2024 12:21:53 -0400 Subject: [PATCH] Update README.md Updated reeadme --- README.md | 150 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 135 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index c720554..35d453c 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,153 @@ -# @appandflow/react-native-google-autocomplete +# React-Native-Google-Autocomplete -A library to help you use google places autocomplete +### About +App & Flow is a Montreal-based, close-knit team that specializes in React Native and Expo development. We work with multiple YC-backed startups and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. team@appandflow.com ## Installation -```sh -npm install @appandflow/react-native-google-autocomplete -``` +`npm install @appandflow/react-native-google-autocomplete` ## Usage +The useGoogleAutocomplete hook takes 2 arguments -```js -import { multiply } from '@appandflow/react-native-google-autocomplete'; +| Arg | Description | +| ---------- | ------------------------------------------------------------------------------------------------------ | +| apiKey | [Your google places api key](https://developers.google.com/maps/documentation/places/web-service/overview) | +| config | optional config object + +# Config object + +| Property | Description | +| ------------ | ------------------------------------------------------------------------------------------------------ | +| debounce | optional - default 300 | +| language | optional - default 'en' | +| queryTypes | optional - default address - https://developers.google.com/places/web-service/autocomplete#place_types | +| minLength | optional - default 2 - this is the min length of the term search before start | +| components | optional - A grouping of places to which you would like to restrict your results | +| radius | optional - The distance (in meters) within which to return place results | +| lat | optional - The latitude. If provided, lng is required | +| lng | optional - The longitue. If provided, lat is required | +| strictBounds | optional - Returns only places that are strictly within the region defined by location and radius. | + +# Exposed properties + +| Property | Description | +| --------------- | --------------------------------------------------------------------------------------------------- | +| clearSearch | Clears your current search | +| isSearching | Boolean that lets you know the search is underway | +| locationResults | The array of results of the search | +| searchDetails | Function that lets you get more details, good for when you select a result | +| searchError | Errors that could occur during search | +| term/setTerm | The term is the search term used, it's set using setTerm | + +# Code example + +This is a minimalistic functionnal snippet that returns 3 results for your search. +Clicking on a result logs the details of that result. + +```ts + const { locationResults, setTerm, clearSearch, searchDetails, term } = + useGoogleAutocomplete(API_KEY, { + language: 'en', + debounce: 300, + }); -// ... + return ( + + + {locationResults.slice(0, 3).map((el, i) => ( + { + const details = await searchDetails(el.place_id); + console.log(JSON.stringify(details, null, 2)); + }} + > + {el.structured_formatting.main_text} + + ))} + + ); +``` + + +## Results -const result = await multiply(3, 7); +`locationResults` returns the following. The maximum result set by Google is 5 locations by query. + +```js +export interface GoogleLocationResult { + description: string; + id: string; + matched_substrings: Array<{ + length: number; + offset: number; + }>; + place_id: string; + reference: string; + structured_formatting: { + main_text: string; + secondary_text: string; + main_text_matched_substrings: Array<{ + length: number; + }>; + }; + terms: Array<{ + offset: number; + value: string; + }>; + types: string[]; +} ``` +When calling the searchDetails this is what you get -## Contributing +```js +export interface GoogleLocationDetailResult { + adr_address: string; + formatted_address: string; + icon: string; + id: string; + name: string; + place_id: string; + scope: string; + reference: string; + url: string; + utc_offset: number; + vicinity: string; + types: string[]; + geometry: { + location: { + lat: number; + lng: number; + }; + viewport: { + [type: string]: { + lat: number; + lng: number; + }; + }; + }; + address_components: Array<{ + long_name: string; + short_name: string; + types: string[]; + }>; +} +``` -See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. +## Typings -## License +You can import both result typing if you need for flow or typescript. -MIT +```js +import { GoogleLocationDetailResult, GoogleLocationResult } from 'react-native-google-autocomplete'; +``` ---- +## Restrict by country -Made with [create-react-native-library](/~https://github.com/callstack/react-native-builder-bob) +If you want to restrict the search by country you can add this as a props `components="country:ca"`. This here would example restrict it to Canada only.