Accessible Google Places Autocomplete Widget for React
About
Google's Places autocomplete widget is extremely popular for finding addresses, but its default implementation is a simple input box that isn't accessible for people using screen-readers or other assistive devices. This leverages the Accessible Autocomplete by the UK Government Digital Service and applies it to the Google Places API to make address selection accessible to all. The Accessible Autocomplete follows the WAI-ARIA best practices and is compatible with many assistive technologies.
Installation / usage
Get a Google Places API key from Google.
Add the component to your project by running:
yarn add accessible-google-places-autocomplete
In your React application, you can import and use the component in your JSX:
;;; ReactDOM;
Building
The component is distributed as ES5 code in the dist/
folder. To build the
ES5 code from the src/
folder Webpack is used.
- make your changes in
src/
- run
yarn build
- commit, tag, and publish new release.
Testing
There is a demo application provided in the repo you can use to test out the component.
cd demo/
- copy
.env.example
to.env
and add your Google Places key. yarn install
yarn start
API documentation
Required props
id
Type: string
The id
used for the embedded input.
googlePlacesApiKey
Type: string
Google Places API Key needed to request addresses. You'll need to [request one] https://developers.google.com/places/web-service/get-api-key) and make sure it has the correct permissions to request addresses from Places API.
Other props
googlePlacesOptions
Type: object
(default: {}
)
Any of the many options available for the Google Places API. See the demo for some examples.
onConfirm(placeResult)
Type: function
Callback function that returns a Google Place Result object when an address is selected. Consider using a package like parseGooglePlace to read the value.
onClear()
Type: function
Callback function called when a new search is performed or the search box is cleared after an address was previously confirmed.
useMoreAccuratePostalCode
Type: boolean
Defaults to false
. Sometimes the Google Places API details returns a partial
postal code instead of a full postal code. In this case, the reverse geocode
API can provide a more accurate postal code. Using this option can increase
your billing cost because of the additional API call. Only use this option if
full postal code matching is required.
required
Type: boolean
(default: false)
Sets the required
attribute of the <input>
.