Differences from Ubilabs' Geosuggest
- This component includes a ValidatedGeocomplete component for rendering validation errors
- The onSuggestSelect for the base component does not fire when no suggest is selected when no suggests are found (See this issue)
- This package does not require React 15
- Both components have a
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:
<!DOCTYPE html> <html> <head> … <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script> </head> <body> … </body> </html>
Visit the Google Developer Console to generate your API key.
You might also be able to use the standalone build by including
dist/react-geosuggest.js in your page. If you use this, make sure you have already included React, and it is available as a global variable. I've never been able to get this to work though.
npm install react-geocomplete --save
For using the base component, please see Ubilabs documentation. It's mostly the same as that.
The ValidatedGeocomplete is very similar to the Geocomplete component, except that it allows you to validate that your input matches an autocomplete description or that the field is required. You can provide a custom component for the validation errors.
This element, when provided, will impose a validation constraint on the element that its value must match an autocomplete suggestion description. The
notFoundErrorComponent component may make use of the
userInput property which will be passed to it.
This element, when provided, will impose a validation constraint on the element that its value must be present.