Autocomplete and Verify Address With React Components
Tags: react, javascript, beginners, tutorial
Published: 2021-10-29 21:34:25

If you’re building an app that requires users to enter their addresses then you’ve probably searched for ways to autocomplete and verify those addresses as well. In addition to providing a smoother user experience, they keep your database clean from bad addresses that could cause errors further down your pipeline. Lob‘s [React address autocomplete library](https://www.npmjs.com/package/@lob/react-address-autocomplete) provides everything you need to get you going out of the box. 

In this article, we’ll show you how to add address autocomplete to a single text input.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49rfpmg7ut7y0eqxeevq.gif)

We’ll also show how to easily add an address form that supports both autocomplete and address verification with a react component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqq851fcgepsot3t8sol.gif)

## Getting Started
We’ll use [create-react-app](https://create-react-app.dev/) to set up an app and install [@lob/react-address-autocomplete](https://www.npmjs.com/package/@lob/react-address-autocomplete).  

{% gist https://gist.github.com/mmrtnz/2f52ce2df521910bf3b9a03fdb9d4165.js %}‍

This last command will run your app in development mode on http://localhost:3000/. 

Before coding, let’s grab our API key from Lob in order to use their service. [Sign up for your Lob.com account](https://dashboard.lob.com/#/register)(it’s free!) then follow [these instructions](https://support.lob.com/hc/en-us/articles/115000094570-Where-are-my-API-Keys-) to obtain your API key. For our demo app we recommend using your test public key. They start with `test_pub_xxxxxxxx`.

NOTE: Address verification is disabled for test API keys. When we are ready to verify an address we’ll switch to our live public key. 

## Adding Autocomplete
Replace the contents of the `App.js` file generated by create-react-app with the following code:

{% gist https://gist.github.com/mmrtnz/ded4c9fff067373a76c9bcc9b48350cf.js %}‍

App.js boilerplate code replaced with Autocomplete

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjlwai6gj1bykjfy236m.gif)

Type “123” to see what addresses are returned. Remember with test API keys you’ll get back limited results.

That’s it! All Lob needs is your API key and the autocomplete component will render an input that suggests addresses based on its value. Lob only suggests autocomplete suggestions for addresses in the U.S. (international autocomplete is on the way!). Let’s extend this app further with the ability to verify the address the user has selected.

## Address Verification
Lob’s address verification (AV) API checks the validity and deliverability of a physical mailing address in the U.S. or internationally. It also standardizes addresses, corrects typos, and provides analytics about the address being verified (e.g. coordinates, building type, type of delivery route, etc.). [@lob/react-address-autocomplete](https://www.npmjs.com/package/@lob/react-address-autocomplete) also provides a useful verification.

{% gist https://gist.github.com/mmrtnz/381d6328974cc0b5ed26156fc8b3b141.js %}‍

## Address autocomplete with verification
We’ve added address verification to our app by doing two things 
* by tracking the most recent autocomplete selection 
* using `verify` to call Lob’s AV API and displaying the results.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5njf36fny48nohu6unky.gif)

**NOTE:** International address verification — to verify an international address we would use the function `verifyInternational` which requires an additional argument `countryCode`. This code must be [2 letter country short-name code (ISO 3166)](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes) and cannot include the US or US territories. 
We would include a select input mapping country names to these values. 

## Displaying an Address Form 
Most forms that require an address typically break up this prompt into multiple inputs one for each address.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tfnen0vwf6a8u8fg32t.png)

`AddressForm` is a useful component that wraps Autocomplete into multiple inputs, the first input containing its autocomplete functionality. Let’s replace the React Autocomplete component in App.js with the AddressForm component.

* Add AddressFrom to the import statement at the top.
* Select lines 25 to 28 in App.js and replace with this code.
* Add your Lob test API key to the AddresssFrom component.

{% gist https://gist.github.com/mmrtnz/596025fb07b6e2bcaa44a139148b48bf.js %}‍

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh7r0keb4rvom5x4epb9.gif)

AddressForm accepts the same props as Autocomplete and an additional prop called styles for modifying the appearance of the elements used in the form (container, input, label, row). Autocomplete uses the Select component from the [react-select](https://react-select.com/) library under the hood, so any props meant for Select will be propagated by Autocomplete. Thus, we override styles of our address form according to [react-select’s styling framework](https://react-select.com/styles). 

## Here’s an example:

{% gist https://gist.github.com/mmrtnz/8330e804b52f36895ec655aea0ff0ce4.js %}‍

Overriding the default styles of AddressForm. Component keys belonging to react-select and also be included to customStyles.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7irjfaf2jsdtun6kws5e.png)

## Conclusion
Address autocomplete and verification has become a standard across many websites online. Thanks to React address autocomplete by @lob you can add this functionality to your web app easily and without giving up control of its appearance. Plus Lob’s address verification (AV) provides additional delivery data to enhance your app’s user experience such as coordinates, county, and delivery info. If you’d like to work with Lob’s Address Verification API directly check out their [documentation here](https://docs.lob.com/#tag/US-Verifications). 

##Resources
* [@lob/react-address-autocomplete](https://www.npmjs.com/package/@lob/react-address-autocomplete)
* [react-select](https://www.npmjs.com/package/react-select)
* [Styling in react-select](https://react-select.com/styles)