https://github.com/lob/react-address-autocomplete
React Autocomplete component for Lob Address Autocomplete
https://github.com/lob/react-address-autocomplete
Last synced: 26 days ago
JSON representation
React Autocomplete component for Lob Address Autocomplete
- Host: GitHub
- URL: https://github.com/lob/react-address-autocomplete
- Owner: lob
- License: mit
- Created: 2022-03-22T21:28:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-20T17:02:03.000Z (almost 2 years ago)
- Last Synced: 2025-04-23T16:38:30.687Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.76 MB
- Stars: 6
- Watchers: 9
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lob React Address Autocomplete
[](https://www.npmjs.com/package/@lob/react-address-autocomplete) []()
[](https://github.com/mui-org/material-ui/blob/master/LICENSE)
**Version 2 is here!**
Our latest version of address autocomplete uses the latest changes from [React 18](https://reactjs.org/blog/2022/03/29/react-v18.html). If you're using earlier version of react, please install version 1 package: `@lob/react-address-autocomplete@previous`
## Features
This is a very lightweight component that uses the Lob Autocomplete API in order to simplify the process of adding in a search autocomplete bar or form. Check out the Autocomplete API for more configuration options on [Postman](https://www.postman.com/lobteam/workspace/lob-public-workspace/overview) or [Lob Documentation](https://docs.lob.com/).
As always if this front end component doesn't suit your bootstrapped needs, feel free to check out the aformentioned links above to have more control over the look and feel of your address autocomplete and verification needs :)
## Install
```bash
npm install --save @lob/react-address-autocomplete
```
## Demo
## Address Autocomplete Search Bar Demo Code
```jsx
import React, { useState } from 'react'
import { Autocomplete } from '@lob/react-address-autocomplete'
const App = () => {
const [selectedResult, setSelectedResult] = useState({})
const handleSelect = (selected) => {
setSelectedResult(selected)
}
return (
)
}
```
## Address Autocomplete Form Demo Code
```jsx
import React, { useState } from 'react';
import { AddressForm, verify } from '@lob/react-address-autocomplete'
const API_KEY = 'YOUR API KEY HERE'
const AddressFormDemo = () => {
const [address, setAddress] = useState({})
const handleFieldChange = (payload) => {
console.log(`${payload.event.target.id} Field Change`, payload)
setAddress(payload.address)
}
const handleSelect = (selection) => {
console.log('Address Selection', selection)
setAddress(selection.value)
}
const handleSubmit = () => {
verify(API_KEY, address).then((verificationResult) => {
console.log('Verification Results', verificationResult)
})
}
return (
Address Form
Submit
);
};
export default AddressFormDemo;
```
## Getting API Keys
Head to [Lob.com](https://www.lob.com/) and create your account. Head to the dashboard and click on Address Verification Getting Started to find your API keys. It's reccomended to use your publishable Live key for front end components. Likely you'll see an error mentioning that there is no verified payment method on hand. Unfortunately due to security reasons, we need a verified payment method on hand. Lob Autocomplete has free unlimited domestic requests so you don't have to worry about any credit card charges for requests about US addresses, however International autocomplete requests will be charged unfortunately.
## Quick Usage
### apiKey
Just plug in the API key you grabbed earlier to the `apiKey` prop.
### Handling the Selection process
The `onSelect` prop is callback function that fires whenever an autocomplete suggestion has been selected. It passes in a location object with the following schema:
```json
{
"value": {
"primary_line": "185 BAYSIDE VILLAGE PL",
"city": "SAN FRANCISCO",
"state": "CA",
"zip_code": "94107"
},
"label": "185 BAYSIDE VILLAGE PL SAN FRANCISCO CA 94107"
}
```
### Debounced Search requests
While Lob doesn't charge for requests, you can still set `delaySearch` to true which delays an API call until a user finishes typing in order to reduce API load. Additionally you can set `debounceValue` to control how long to wait between calls in milliseconds. This is 100% optional and everything will be functional without this on.
[Click here for more details about the props for each component](https://github.com/lob/react-address-autocomplete/wiki/React-Address-Autocomplete-Component-Props)
## Release Logs
[View release notes from previous versions](https://github.com/lob/react-address-autocomplete/releases)
## License
MIT © [lob](https://github.com/lob)