Skip to content

Commit 868f85f

Browse files
matmarticmatmartic
authored
Update README.md
Updated reeadme
1 parent f45885a commit 868f85f

File tree

1 file changed

+135
-15
lines changed

1 file changed

+135
-15
lines changed

‎README.md‎

Lines changed: 135 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,153 @@
1-
# @appandflow/react-native-google-autocomplete
1+
# React-Native-Google-Autocomplete
22

3-
A library to help you use google places autocomplete
3+
### About
4+
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. [email protected]
45

56
## Installation
67

7-
```sh
8-
npm install @appandflow/react-native-google-autocomplete
9-
```
8+
`npm install @appandflow/react-native-google-autocomplete`
109

1110
## Usage
1211

12+
The useGoogleAutocomplete hook takes 2 arguments
1313

14-
```js
15-
import { multiply } from '@appandflow/react-native-google-autocomplete';
14+
| Arg | Description |
15+
| ---------- | ------------------------------------------------------------------------------------------------------ |
16+
| apiKey | [Your google places api key](https://developers.google.com/maps/documentation/places/web-service/overview) |
17+
| config | optional config object
18+
19+
# Config object
20+
21+
| Property | Description |
22+
| ------------ | ------------------------------------------------------------------------------------------------------ |
23+
| debounce | optional - default 300 |
24+
| language | optional - default 'en' |
25+
| queryTypes | optional - default address - https://developers.google.com/places/web-service/autocomplete#place_types |
26+
| minLength | optional - default 2 - this is the min length of the term search before start |
27+
| components | optional - A grouping of places to which you would like to restrict your results |
28+
| radius | optional - The distance (in meters) within which to return place results |
29+
| lat | optional - The latitude. If provided, lng is required |
30+
| lng | optional - The longitue. If provided, lat is required |
31+
| strictBounds | optional - Returns only places that are strictly within the region defined by location and radius. |
32+
33+
# Exposed properties
34+
35+
| Property | Description |
36+
| --------------- | --------------------------------------------------------------------------------------------------- |
37+
| clearSearch | Clears your current search |
38+
| isSearching | Boolean that lets you know the search is underway |
39+
| locationResults | The array of results of the search |
40+
| searchDetails | Function that lets you get more details, good for when you select a result |
41+
| searchError | Errors that could occur during search |
42+
| term/setTerm | The term is the search term used, it's set using setTerm |
43+
44+
# Code example
45+
46+
This is a minimalistic functionnal snippet that returns 3 results for your search.
47+
Clicking on a result logs the details of that result.
48+
49+
```ts
50+
const { locationResults, setTerm, clearSearch, searchDetails, term } =
51+
useGoogleAutocomplete(API_KEY, {
52+
language: 'en',
53+
debounce: 300,
54+
});
1655

17-
// ...
56+
return (
57+
<View>
58+
<TextInput
59+
value={term}
60+
onChangeText={setTerm}
61+
/>
62+
{locationResults.slice(0, 3).map((el, i) => (
63+
<TouchableOpacity
64+
key={String(i)}
65+
onPress={async () => {
66+
const details = await searchDetails(el.place_id);
67+
console.log(JSON.stringify(details, null, 2));
68+
}}
69+
>
70+
<Text>{el.structured_formatting.main_text}</Text>
71+
</TouchableOpacity>
72+
))}
73+
</View>
74+
);
75+
```
76+
77+
78+
## Results
1879

19-
const result = await multiply(3, 7);
80+
`locationResults` returns the following. The maximum result set by Google is 5 locations by query.
81+
82+
```js
83+
export interface GoogleLocationResult {
84+
description: string;
85+
id: string;
86+
matched_substrings: Array<{
87+
length: number;
88+
offset: number;
89+
}>;
90+
place_id: string;
91+
reference: string;
92+
structured_formatting: {
93+
main_text: string;
94+
secondary_text: string;
95+
main_text_matched_substrings: Array<{
96+
length: number;
97+
}>;
98+
};
99+
terms: Array<{
100+
offset: number;
101+
value: string;
102+
}>;
103+
types: string[];
104+
}
20105
```
21106

107+
When calling the searchDetails this is what you get
22108

23-
## Contributing
109+
```js
110+
export interface GoogleLocationDetailResult {
111+
adr_address: string;
112+
formatted_address: string;
113+
icon: string;
114+
id: string;
115+
name: string;
116+
place_id: string;
117+
scope: string;
118+
reference: string;
119+
url: string;
120+
utc_offset: number;
121+
vicinity: string;
122+
types: string[];
123+
geometry: {
124+
location: {
125+
lat: number;
126+
lng: number;
127+
};
128+
viewport: {
129+
[type: string]: {
130+
lat: number;
131+
lng: number;
132+
};
133+
};
134+
};
135+
address_components: Array<{
136+
long_name: string;
137+
short_name: string;
138+
types: string[];
139+
}>;
140+
}
141+
```
24142

25-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
143+
## Typings
26144

27-
## License
145+
You can import both result typing if you need for flow or typescript.
28146

29-
MIT
147+
```js
148+
import { GoogleLocationDetailResult, GoogleLocationResult } from 'react-native-google-autocomplete';
149+
```
30150

31-
---
151+
## Restrict by country
32152

33-
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
153+
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.

0 commit comments

Comments
 (0)