Lob React Address Autocomplete

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 or Lob Documentation.

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

npm install --save @lob/react-address-autocomplete

Demo

Address Autocomplete Search Bar Demo Code

import React, { useState } from 'react'

import { Autocomplete } from '@lob/react-address-autocomplete'

const App = () => {
  const [selectedResult, setSelectedResult] = useState({})
  const handleSelect = (selected) => {
    setSelectedResult(selected)
  }

  return (
    <Autocomplete
      apiKey="YOUR_API_KEY_HERE"
      onSelection={handleSelect}
      delaySearch={true}
    />
  )
}

Address Autocomplete Form Demo Code

import React, { useState } from 'react';
import { AddressForm } from '@lob/react-address-autocomplete'

const AddressFormDemo = ({ apiKey }) => {
  const [selectedResult, setSelectedResult] = useState({})


  const handleSelect = (selected) => {
    setSelectedResult(selected)
  }

  const handleSubmit = () =>
    // Set this to handle an actual button click
    console.log(selectedResult)

  return (
    <div className="demoContainer">
      <h2>Address Form</h2>
      <AddressForm
        apiKey={apiKey}
        onSelection={handleSelect}
      />
      <button
        onClick={handleSubmit}
        style={{ width: '100%' }}
      >
        Submit
      </button>
    </div>
  );
};

export default AddressFormDemo;

Getting API Keys

Head to 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. Lob Autocomplete has free unlimited requests so you don't have to worry about any credit card charges :)

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:

{
   "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

Since Lob charges per request, you can set delaySearch to true which delays an API call until a user finishes typing in order to reduce API load if you want. Additionally you can set debounceValue to control how long to wait between calls in milliseconds.

Click here for more details about the props for each component

Latest Release

1.0.8 (LATEST RELEASE)

Latest improvements
Introduction of Autocomplete Forms
Removed UI restrictions blocking flow of autocomplete results
### 1.0.7
:---
README updates
Improved API performance and autocomplete accuracy
### 1.0.6
:---
Minor bug fixes in the demo app
Prevents Autocomplete from calling API on render

View release notes from previous versions

License

MIT © lob