Skip to content

Commit f2d7ff9

Browse files
committed
feat: update README with new preview section and examples
1 parent 0bcd339 commit f2d7ff9

File tree

2 files changed

+73
-10
lines changed

2 files changed

+73
-10
lines changed

README.md

Lines changed: 73 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,13 @@ A customizable React Native TextInput component for Google Places Autocomplete u
1313
- 🔍 Custom place types filtering
1414
- 🌐 Multi-language support
1515

16-
## Screenshot
17-
<img src="https://github.com/user-attachments/assets/1eb0c4da-4a2e-453e-a6b4-d63bf7fa4d20" width="320"/>
16+
## Preview
17+
18+
<table>
19+
<tr>
20+
<td><img width="260" src="assets/places-search-demo.gif" alt="Places Search Demo"></td>
21+
</tr>
22+
</table>
1823

1924
## Installation
2025

@@ -31,17 +36,67 @@ yarn add react-native-google-places-textinput
3136

3237
## Usage
3338

39+
### Basic Example
3440
```javascript
3541
import GooglePlacesTextInput from 'react-native-google-places-textinput';
3642

3743
const YourComponent = () => {
3844
const handlePlaceSelect = (place) => {
39-
if (place) {
40-
console.log('Selected place:', place);
45+
console.log('Selected place:', place);
46+
};
47+
48+
const basicStyles = {
49+
container: {
50+
width: '100%', // Ensure full width
51+
paddingHorizontal: 16,
52+
},
53+
input: {
54+
height: 40, // Comfortable touch target
4155
}
4256
};
4357

44-
// Example with custom styles
58+
return (
59+
<GooglePlacesTextInput
60+
apiKey="YOUR_GOOGLE_PLACES_API_KEY"
61+
onPlaceSelect={handlePlaceSelect}
62+
style={basicStyles}
63+
/>
64+
);
65+
};
66+
```
67+
68+
<details>
69+
<summary>Example with Places API Configuration</summary>
70+
71+
```javascript
72+
const ConfiguredExample = () => {
73+
const handlePlaceSelect = (place) => {
74+
console.log('Selected place:', place);
75+
};
76+
77+
return (
78+
<GooglePlacesTextInput
79+
apiKey="YOUR_GOOGLE_PLACES_API_KEY"
80+
onPlaceSelect={handlePlaceSelect}
81+
languageCode="fr"
82+
types={['restaurant', 'cafe']}
83+
includedRegionCodes={['fr', 'be']}
84+
minCharsToFetch={2}
85+
/>
86+
);
87+
};
88+
```
89+
</details>
90+
91+
<details>
92+
<summary>Example with Full Styling</summary>
93+
94+
```javascript
95+
const StyledExample = () => {
96+
const handlePlaceSelect = (place) => {
97+
console.log('Selected place:', place);
98+
};
99+
45100
const customStyles = {
46101
container: {
47102
width: '100%',
@@ -82,30 +137,36 @@ const YourComponent = () => {
82137
apiKey="YOUR_GOOGLE_PLACES_API_KEY"
83138
placeHolderText="Search for a place"
84139
onPlaceSelect={handlePlaceSelect}
85-
languageCode="en"
86140
style={customStyles}
87141
/>
88142
);
89143
};
90144
```
145+
</details>
91146

92147
## Props
93148

94149
| Prop | Type | Required | Default | Description |
95150
|------|------|----------|---------|-------------|
151+
| **Essential Props** |
96152
| apiKey | string | Yes | - | Your Google Places API key |
153+
| **Input Configuration** |
97154
| value | string | No | '' | Initial input value |
98155
| placeHolderText | string | No | - | Placeholder text for input |
156+
| minCharsToFetch | number | No | 1 | Minimum characters before fetching |
157+
| debounceDelay | number | No | 200 | Delay before triggering search |
158+
| **Places API Configuration** |
99159
| proxyUrl | string | No | - | Custom proxy URL for Places API requests |
100160
| languageCode | string | No | - | Language code (e.g., 'en', 'fr') |
101161
| includedRegionCodes | string[] | No | - | Array of region codes to filter results |
102162
| types | string[] | No | [] | Array of place types to filter |
103163
| biasPrefixText | string | No | - | Text to prepend to search query |
104-
| minCharsToFetch | number | No | 1 | Minimum characters before fetching |
105-
| onPlaceSelect | (place: Place \| null) => void | Yes | - | Callback when place is selected |
106-
| debounceDelay | number | No | 200 | Delay before triggering search |
107-
| showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
164+
| **UI Customization** |
108165
| style | StyleProp | No | {} | Custom styles object |
166+
| showLoadingIndicator | boolean | No | true | Show/hide loading indicator |
167+
| showClearButton | boolean | No | true | Show/hide the input clear button |
168+
| **Event Handlers** |
169+
| onPlaceSelect | (place: Place \| null) => void | Yes | - | Callback when place is selected |
109170
| onTextChange | (text: string) => void | No | - | Callback triggered on text input changes |
110171

111172
## Methods
@@ -156,4 +217,6 @@ MIT
156217
157218
---
158219
220+
Written by Amit Palomo
221+
159222
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

assets/places-search-demo.gif

3.46 MB
Loading

0 commit comments

Comments
 (0)