Skip to content

Commit 05e74ca

Browse files
authored
Merge pull request #2 from Badiapp/add_placeDetailFields
enhancement/add_placeDetailFields
2 parents dad8a82 + a214dc2 commit 05e74ca

File tree

6 files changed

+158
-60
lines changed

6 files changed

+158
-60
lines changed

README.md

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22

33
A [React](http://facebook.github.io/react/) autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with [Preact](https://github.com/developit/preact), too.
44

5-
65
## Demo
76

87
Live demo: [ubilabs.github.io/react-geosuggest](http://ubilabs.github.io/react-geosuggest/)
98

10-
119
## Installation
1210

1311
As this component uses the Google Maps Places API to get suggests, you must include the Google Maps Places API in the `<head>` of your HTML:
@@ -44,91 +42,99 @@ The Geosuggest works out of the box by just including it. However, you can custo
4442
```js
4543
import Geosuggest from 'react-geosuggest';
4644

47-
<Geosuggest />
45+
<Geosuggest />;
4846
```
4947

5048
### ES5:
5149

5250
```js
5351
var Geosuggest = require('react-geosuggest').default;
5452

55-
<Geosuggest />
53+
<Geosuggest />;
5654
```
5755

5856
### Properties
5957

6058
#### placeholder
59+
6160
Type: `String`
6261
Default: `Search places`
6362

6463
The input field will get this placeholder text.
6564

6665
#### initialValue
66+
6767
Type: `String`
6868
Default: `''`
6969

7070
An initial value for the input, when you want to prefill the suggest.
7171

7272
#### className
73+
7374
Type: `String`
7475
Default: `''`
7576

7677
Add an additional class to the geosuggest container.
7778

7879
#### style
80+
7981
Type: `Object`
80-
Default: `{
81-
'input': {},
82-
'suggests': {},
83-
'suggestItem': {}
84-
}`
82+
Default: `{ 'input': {}, 'suggests': {}, 'suggestItem': {} }`
8583

8684
Add an additional style to `Geosuggest`.
8785
This would support overriding/adding styles to the input suggestList and suggestItem.
8886

8987
#### inputClassName
88+
9089
Type: `String`
9190
Default: `''`
9291

9392
Add an additional class to the input.
9493

9594
#### disabled
95+
9696
Type: `Boolean`
9797
Default: `false`
9898

9999
Defines whether the input is disabled.
100100

101101
#### location
102+
102103
Type: [`google.maps.LatLng`](https://developers.google.com/maps/documentation/javascript/reference#LatLng)
103104
Default: `null`
104105

105106
To get localized suggestions, define a location to bias the suggests.
106107

107108
#### radius
109+
108110
Type: `Number`
109111
Default: `0`
110112

111113
The radius in meters defines the area around the location to use for biasing the suggests. It must be accompanied by a `location` parameter.
112114

113115
#### bounds
116+
114117
Type: [`LatLngBounds`](https://developers.google.com/maps/documentation/javascript/reference?csw=1#LatLngBounds)
115118
Default: `null`
116119

117120
The bounds to use for biasing the suggests. If this is set, `location` and `radius` are ignored.
118121

119122
#### country
123+
120124
Type: `String` or `Array`
121125
Default: `null`
122126

123127
Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). E.g., us, br, au. You can provide a single one, or an array of up to 5 country code strings.
124128

125129
#### types
130+
126131
Type: `Array`
127132
Default: `null`
128133

129134
The types of predictions to be returned. Four types are supported: `establishment` for businesses, `geocode` for addresses, `(regions)` for administrative regions and `(cities)` for localities. If nothing is specified, all types are returned. Consult the Google Docs for [up to date types](https://developers.google.com/maps/documentation/javascript/reference#AutocompletionRequest).
130135

131136
#### fixtures
137+
132138
Type: `Array`
133139
Default: `[]`
134140

@@ -137,165 +143,196 @@ An array with fixtures (defaults). Each fixture has to be an object with a `labe
137143
You can also add a `className` key to a fixture. This class will be applied to the fixture item.
138144

139145
#### maxFixtures
146+
140147
Type: `Number`
141148
Default: `10`
142149

143150
Maximum number of fixtures to render.
144151

152+
#### placeDetailFields
153+
154+
Type: `Array`
155+
Default: `null`
156+
145157
#### googleMaps
158+
146159
Type: `Object`
147160
Default: `google.maps`
148161

149162
In case you want to provide your own Google Maps object, pass it in as googleMaps. The default is the global google maps object.
150163

151164
#### ignoreTab
165+
152166
Type: `Boolean`
153167
Default: `false`
154168

155169
When the tab key is pressed, the `onSelect` handler is invoked. Set to true to not invoke `onSelect` on tab press.
156170

157171
#### ignoreEnter
172+
158173
Type: `Boolean`
159174
Default: `false`
160175

161176
When the enter key is pressed, the `onSelect` handler is invoked. Set to true to not invoke `onSelect` on enter press.
162177

163178
#### queryDelay
179+
164180
Type: `Number`
165181
Default: `250`
166182

167183
Sets the delay in milliseconds after typing before a request will be sent to find suggestions.
168184
Specify `0` if you wish to fetch suggestions after every keystroke.
169185

170186
#### minLength
187+
171188
Type: `Number`
172189
Default: `1`
173190

174191
Sets a minimum length of characters before a request will be sent to find suggestions.
175192

176193
#### highlightMatch
194+
177195
Type: `Boolean`
178196
Default: `true`
179197

180198
Highlights matched text.
181199

182200
#### onFocus
201+
183202
Type: `Function`
184203
Default: `function() {}`
185204

186205
Gets triggered when the input field receives focus.
187206

188207
#### onBlur
208+
189209
Type: `Function`
190210
Default: `function(value) {}`
191211

192212
Gets triggered when input field loses focus.
193213

194214
#### onChange
215+
195216
Type: `Function`
196217
Default: `function(value) {}`
197218

198219
Gets triggered when input field changes the value.
199220

200221
#### onKeyDown
222+
201223
Type: `Function`
202224
Default: `function(event) {}`
203225

204226
Gets triggered when input field has a key pressed down. This event is triggered before onKeyPress.
205227

206228
#### onKeyPress
229+
207230
Type: `Function`
208231
Default: `function(event) {}`
209232

210233
Gets triggered when input field gets key press.
211234

212235
#### onSuggestSelect
236+
213237
Type: `Function`
214238
Default: `function(suggest) {}`
215239

216240
Gets triggered when a suggest got selected. Only parameter is an object with data of the selected suggest. This data is available:
217241

218-
* `label` – Type `String` – The label name
219-
* `placeId` – Type `String` – If it is a preset, equals the `label`. Else it is the Google Maps `placeID`
220-
* `location` – Type `Object` – The location containing `lat` and `lng`
221-
* `gmaps` – Type `Object` – *Optional!* The complete response when there was a Google Maps geocode necessary (e.g. no location provided for presets). [Check the Google Maps Reference](https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult) for more information on it’s structure.
242+
- `label` – Type `String` – The label name
243+
- `placeId` – Type `String` – If it is a preset, equals the `label`. Else it is the Google Maps `placeID`
244+
- `location` – Type `Object` – The location containing `lat` and `lng`
245+
- `gmaps` – Type `Object` – *Optional!* The complete response when there was a Google Maps geocode necessary (e.g. no location provided for presets). [Check the Google Maps Reference](https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult) for more information on it’s structure.
222246

223247
#### onUpdateSuggests
248+
224249
Type: `Function`
225250
Default: `function(suggests, activeSuggest) {}`
226251

227252
Gets triggered when the suggest list changes. Arguments include the suggest list and the current activeSuggest. Useful if you want to render the list of suggests outside of react-geosuggest.
228253

229254
#### onActivateSuggest
255+
230256
Type: `Function`
231257
Default: `function(suggest) {}`
232258

233259
Gets triggered when a suggest is activated in the list. Only parameter is an object with data of the selected suggest. This data is available:
234260

235-
* `label` – Type `String` – The label name
236-
* `placeId` – Type `String` – If it is a preset, equals the `label`. Else it is the Google Maps `placeID`
261+
- `label` – Type `String` – The label name
262+
- `placeId` – Type `String` – If it is a preset, equals the `label`. Else it is the Google Maps `placeID`
237263

238264
#### onSuggestNoResults
265+
239266
Type: `Function`
240267
Default: `function(userInput) {}`
241268

242269
Gets triggered when there are no suggest results found
243270

244271
#### getSuggestLabel
272+
245273
Type: `Function`
246274
Default: `function(suggest) { return suggest.description; }`
247275

248276
Used to generate a custom label for a suggest. Only parameter is a suggest (google.maps.places.AutocompletePrediction). [Check the Google Maps Reference](https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult) for more information on it’s structure.
249277

250278
#### renderSuggestItem
279+
251280
Type: `Function`
252281
Default: `null`
253282

254283
Used to customize the inner html of SuggestItem and allows for controlling what properties of the suggest object you want to render. Also a convenient way to add additional styling to different rendered elements within SuggestItem. The function is passed both the suggestion and the user input.
255284

256285
#### skipSuggest
286+
257287
Type: `Function`
258288
Default: `function(suggest) {}`
259289

260290
If the function returns true then the suggest will not be included in the displayed results. Only parameter is an object with data of the selected suggest. (See above)
261291

262292
#### autoActivateFirstSuggest
293+
263294
Type: `Boolean`
264295
Default: `false`
265296

266297
Automatically activate the first suggestion as you type. If false, the exact term(s) in the input will be used when searching and may return a result not in the list of suggestions.
267298

268299
#### label
300+
269301
Type: `String`
270302
Default: `null`
271303

272304
If the `label` and a `id` prop (see "Others") were supplied, a `<label>` tag with the passed label text will be rendered. The `<label>` element's `for` attribute will correctly point to the `id` of the `<input>` element.
273305

274306
#### suggestsClassName
307+
275308
Type: `String`
276309
Default: `''`
277310

278311
Add an additional class to suggest list.
279312

280313
#### suggestsHiddenClassName
314+
281315
Type: `String`
282316
Default: `null`
283317

284318
Additional `className` to toggle as the list of suggestions changes visibility.
285319

286320
#### suggestItemClassName
321+
287322
Type: `String`
288323
Default: `''`
289324

290325
Add an additional class to suggest item.
291326

292327
#### suggestItemActiveClassName
328+
293329
Type: `String`,
294330
Default: `null`
295331

296332
Additional `className` to add when a suggestion item is active.
297333

298334
#### autoComplete
335+
299336
Type: `String`,
300337
Default: `nope`
301338

@@ -307,23 +344,28 @@ All [allowed attributes for `input[type="text"]`](https://github.com/ubilabs/rea
307344
All [DOM clipboard events](https://facebook.github.io/react/docs/events.html#clipboard-events).
308345
All [DOM mouse events](https://facebook.github.io/react/docs/events.html#mouse-events) except for drag & drop.
309346

310-
311347
### Exposed component functions
348+
312349
These functions are accessible by setting "ref" on the component (see example below)
313350

314351
#### focus()
352+
315353
Call `focus` to focus on the element. The suggest list will be expanded with the current suggestions.
316354

317355
#### blur()
356+
318357
Call `blur` to blur (unfocus) the element. The suggest list will be closed.
319358

320359
#### update(value)
360+
321361
It is possible to update the value of the input contained within the GeoSuggest component by calling the `update` function with a new desired `value` of the type String.
322362

323363
#### clear()
364+
324365
It is also possible to clear the value of the input contained within the GeoSuggest component by calling the `clear` function.
325366

326367
#### selectSuggest()
368+
327369
Same effect as hitting `enter` (will geocode the text inside of the input).
328370

329371
### Example
@@ -383,22 +425,26 @@ This component uses [BEM](http://csswizardry.com/2013/01/mindbemding-getting-you
383425
### Note:
384426

385427
The `geosuggest__suggests--hidden` class is added to hide the suggestion list. You should copy the style below into your CSS file.
428+
386429
```css
387430
.geosuggest__suggests--hidden {
388431
max-height: 0;
389432
overflow: hidden;
390433
border-width: 0;
391434
}
392435
```
436+
393437
The above class is added whenever the suggestion list needs to be hidden. This occurs when the user selects an item from the list or when the user triggers the `blur` event on the input.
394438

395439
Similarly, you need to have the class `geosuggest__item--active` similar to this:
440+
396441
```css
397442
.geosuggest__item--active {
398443
background: #267dc0;
399444
color: #fff;
400445
}
401446
```
447+
402448
to see what item is selected, f.ex. when using the arrow keys to navigate the suggestion list.
403449

404450
## Contributing

0 commit comments

Comments
 (0)